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学 科 体 系 的 解构 与 行动 体系 的 重 构 
一 一 “工作 过 程 导向 "新 理念 教材 代 序 


职业 教育 作为 一 种 教育 类 型 ,其 课程 也 必须 有 自己 的 类 型 特征 。 从 教育 学 的 观点 来 看 ， 
当 且 仅 当 课程 内 容 的 选择 以 及 所 选 内 容 的 序 化 都 符合 职业 教育 的 特色 和 要 求 之 时 ,职业 教 
育 的 课程 改革 才能 成 功 。 这 里 ,改革 的 成 功 与 否 有 两 个 决定 性 的 因素 : 一 个 是 课程 内 容 的 
选择 ,一 个 是 课程 内 容 的 序 化 。 这 也 是 职业 教育 教材 编写 的 基础 。 

首先 ,课程 内 容 的 选择 涉及 的 是 课程 内 容 选 择 的 标准 问题 。 

个 体 所 具有 的 智力 类 型 大 致 分 为 两 大 类 : 一 是 抽象 思维 ,一 是 形象 思维 。 职 业 教育 的 
教育 对 象 , 依 据 多 元 智能 理论 分 析 , 其 逻辑 数理 方面 的 能 力 相对 较 差 ,而 空间 视觉 .身体 动 觉 
以 及 音乐 节奏 等 方面 的 能 力 则 较 强 。 故 职业 教育 的 教育 对 象 是 具有 形象 思维 特点 的 个 体 。 

一 般 来 说 ,课程 内 容 涉 及 两 大 类 知识 : 一 类 是 涉及 事实 、 概 念 以 及 规律 .原理 方面 的 “ 陈 
述 性 知识 ”, 一 类 是 涉及 经 验 以 及 策略 方面 的 “过 程 性 知识 ".。“ 事 实 与 概念 "解答 的 是 “是 什 
么 ”的 问题 ,“ 规 律 与 原理 "回答 的 是 “为 什么 "的 问题 ; 而 "经验 " 指 的 是 “怎么 做 ”的 问题 ,“ 策 
略 "强调 的 则 是 “怎样 做 更 好 ”的 问题 。 

由 专业 学 科 构成 的 以 结构 逻辑 为 中 心 的 学 科 体 系 ,侧重 于 传授 实际 存在 的 显 性 知识 即 
理论 性 知识 ,主要 解决 “是 什么 "(事实 、 概 念 等 ) 和 * 为 什么 "(规律 .原理 等 ) 的 问题 ,这 是 培养 
科学 型 人 才 的 一 条 主要 途径 。 

由 实践 情境 构成 的 以 过 程 逻辑 为 中 心 的 行动 体系 ,强调 的 是 获取 自我 建构 的 隐 性 知识 
即 过 程 性 知识 ,主要 解决 “怎么 做 "(经 验 ) 和 “怎样 做 更 好 ”( 策 略 ) 的 问题 ,这 是 培养 职业 型 人 
才 的 一 条 主要 途径 。 

因此 ,职业 教育 课程 内 容 选 择 的 标准 应 该 以 职业 实际 应 用 的 经 验 和 策略 的 习 得 为 主 , 以 
适度 够 用 的 概念 和 原理 的 理解 为 辅 , 即 以 过 程 性 知识 为 主 \ 陈 述 性 知识 为 辅 。 

其 次 ,课程 内 容 的 序 化 涉及 的 是 课程 内 容 序 化 的 标准 问题 。 

知识 只 有 在 序 化 的 情况 下 才能 被 传递 ,而 序 化 意味 着 确立 知识 内 容 的 框架 和 顺序 。 职 
业 教育 课程 所 选取 的 内 容 , 由 于 既 涉及 过 程 性 知识 ,又 涉及 陈述 性 知识 ,因此 ,寻求 这 两 类 知 
识 的 有 机 融合 ,就 需要 一 个 恰当 的 参照 系 ,以 便 能 以 此 为 基础 对 知识 实施 “ 序 化 ”。 

按照 学 科 体系 对 知识 内 容 序 化 ,课程 内 容 的 编排 呈现 出 一 种 “平行 结构 ”的 形式 。 学 科 
体系 的 课程 结构 常会 导致 陈述 性 知识 与 过 程 性 知识 的 分 割 、 理 论 知识 与 实践 知识 的 分 割 , 以 
及 知识 排序 方式 与 知识 习 得 方式 的 分 割 。 这 不 仅 与 职业 教育 的 培养 目标 相悖 ,而 且 与 职业 
教育 追求 的 整体 性 学 习 的 教学 目标 相悖 。 

按照 行动 体系 对 知识 内 容 序 化 ,课程 内 容 的 编排 则 呈现 一 种 * 串 行 结构 "的 形式 。 在 学 
习 过 程 中 ,学 生 认 知 的 心理 顺序 与 专业 所 对 应 的 典型 职业 工作 顺序 ,或 是 对 多 个 职业 工作 过 
程 加 以 归纳 整合 后 的 职业 工作 顺序 ,即行 动 顺序 ,都 是 串 行 的 。 这 样 ,针对 行动 顺序 的 每 一 
个 工作 过 程 环节 来 传授 相关 的 课程 内 容 , 实 现实 践 技能 与 理论 知识 的 整合 ,将 收 到 事半功倍 
的 效果 。 鉴 于 每 一 行动 顺序 都 是 一 种 自然 形成 的 过 程序 列 , 而 学 生 认 知 的 心理 顺序 也 是 循 
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序 渐进 自然 形成 的 过 程序 列 , 这 表明 , 认 知 的 心理 顺序 与 工作 过 程 顺序 在 一 定 程度 上 是 吻 
合 的 。 

需要 特别 强调 的 是 ,按照 工作 过 程 来 序 化 知识 , 即 以 工作 过 程 为 参照 系 ,将 陈述 性 知识 
与 过 程 性 知识 整合 理论 知识 与 实践 知识 整合 ,其 所 呈现 的 知识 从 学 科 体系 来 看 是 离散 的 、 
跳跃 的 和 不 连续 的 ,但 从 工作 过 程 来 看 , 却 是 非 离散 的 、 非 跳跃 的 和 连续 的 了 。 因 此 ,参照 系 
在 发 挥 着 关键 的 作用 。 课 程 不 再 关注 建筑 在 静态 学 科 体系 之 上 的 显 性 理论 知识 的 复制 与 再 
现 ,而 更 多 的 是 着 眼 于 蕴含 在 动态 行动 体系 之 中 的 隐 性 实践 知识 的 生成 与 构建 。 这 意味 着 ， 
知识 的 总 量 未 变 , 知 识 排序 的 方式 发 生变 化 , 正 是 对 这 一 全 新 的 职业 教育 课程 开发 方案 中 所 
蕴含 的 革命 性 变化 的 本 质 概括 。 

由 此 ,我 们 可 以 得 出 这 样 的 结论 : 如 果 “ 工 作 过 程 导向 的 序 化 ”获得 成 功 ,那么 传统 的 学 
科 课 程序 列 就 将 “出 局 ”, 通 过 对 其 保持 适当 的 “有 距离 观察 ”, 就 有 可 能 解放 与 扩展 传统 的 课 
程 视野 ,寻求 现代 的 知识 关联 与 分 离 的 路 线 , 确 立 全 新 的 内 容 定 位 与 支点 ,从 而 凸显 课程 的 
职业 教育 特色 。 因 此 ,“ 工 作 过 程 导向 的 序 化 "是 一 个 与 已 知 的 序列 范畴 进行 的 对 话 , 也 是 与 
课程 开发 者 的 立场 和 观点 进行 对 话 的 创造 性 行动 。 这 一 行动 并 不 是 简单 地 排斥 学 科 体系 ， 
而 是 通过 * 有 距离 观察 ”, 在 一 个 全 新 的 架构 中 获得 对 职业 教育 课程 论 的 元 层次 认 知 。 所 以 ， 
“工作 过 程 导向 的 课程 ”的 开发 过 程 , 实 际 上 是 一 个 伴随 学 科 体系 的 解构 而 凸显 行动 体系 的 
重 构 的 过 程 。 然 而 ,学 科 体系 的 解构 并 不 意味 着 学 科 体系 的 “肢解 ”而 是 依据 职业 情境 对 知 
识 实施 行动 性 重 构 ,进而 实现 新 的 体系 一 一 行动 体系 的 构建 过 程 。 不 破 不 立 ,学科 体系 解构 
之 后 ,在 工作 过 程 基础 上 的 系统 化 和 结构 化 的 产物 一 一 行动 体系 也 就 * 立 在 其 中 "了 。 

非常 高 兴 , 作 为 中 国 “ 学 科 体系 "最 高 典 堂 的 清华 大 学 ,开始 关注 占 人 类 大 多 数 的 具有 形 
象 思维 这 一 智力 特点 的 人 群 成 才 的 教育 一 一 职业 教育 。 坚 信 清 华 大 学 出 版 社 的 害 智 之 举 ， 
将 会 在 中 国教 育 界 掀起 一 股 新 风 。 我 为 母校 感到 自豪 ! 


2006 年 8 月 8 日 


随 着 社会 的 发 展 ,网 站 平台 越 来 越 受到 重视 ,因此 ,在 许多 高 校 的 计算 机 
人 才 培 养 目标 中 ,网 站 开发 也 日 渐 成 为 一 种 必需 的 核心 技能 。 目 前 ,有 关 网 
站 开发 的 书 大 致 分 为 两 类 : 一 是 介绍 静态 技术 ; 二 是 介绍 动态 技术 。 在 介绍 
网 站 开发 静态 技术 的 这 一 类 书 中 ,以 真实 的 网 站 开发 流程 为 线索 来 组 织 内 容 
的 教材 较 少 ; 同时 ,目前 的 高 等 职业 教育 , 越 来 越 重视 在 课程 中 培养 学 生 的 职 
业 技 能 。 因 此 ,一 本 以 “网 站 开发 流程 ”为 线索 的 教材 是 高 等 职业 教育 市 场所 
需要 的 ,本 书 正 是 为 此 而 编写 。 

本 书 以 两 个 网 站 开发 案例 为 平台 ,以 网 站 开发 流程 为 线索 ,介绍 网 站 开 
发 静态 技术 ,包括 HTML .需求 分 析 、 网 站 界面 设计 、 网 页 制作 、Flash、 网 站 发 
布 和 测试 等 方面 的 知识 。 其 中 ,网 站 界面 设计 主要 以 Fireworks 为 工具 , 介 
绍 图 像 的 制作 和 处 理 ; 网 页 制作 则 主要 以 Dreamweaver 为 工具 ,介绍 表格 、 
图 文 、 链 接 .CSS 框架 ,行为 . 层 . 表 单 等 应 用 ; Flash 部 分 主要 介绍 动画 制作 
原理 ,以 及 简单 的 动画 制作 和 常见 的 应 用 。 全 书 主要 有 以 下 3 个 特点 。 

(1) 以 个 人 网 站 和 校园 网 站 为 案例 ,让 学 生 能 够 依托 真实 的 实践 平台 进 
行 学 习 , 从 而 能 够 更 深刻 ,更 灵活 地 掌握 网 站 开发 的 基础 技术 。 

(2) 按 网 站 开发 的 一 般 流程 来 组 织 学 习 内 容 , 让 学 习 过 程 更 加 科学 化 。 

(3) 两 个 网 站 案例 涉及 的 学 习 内 容 从 浅 到 深 , 符 合 学 习 的 规律 。 

书 中 所 涉及 的 图 像 、 网 页 和 动画 素材 以 及 本 书 的 电子 教案 ,读者 可 从 
http://tup. tsinghua. edu. cn 上 下 载 。 

本 书面 向 的 主要 读者 对 象 是 网 站 开发 初学 者 ,可 作为 网 站 开发 人 门 教 
材 , 也 可 作为 自学 参考 书 。 同 时 , 书 中 融入 了 基于 工作 过 程 的 思想 ,能 够 帮助 
学 生 学 习 和 提高 在 网 站 开发 方面 的 职业 技能 。 

在 本 书 的 编写 过 程 中 ,参考 了 大 量 的 专业 资料 ,并 得 到 了 多 位 同行 的 帮 
助 和 支持 ,其 中 王国 瑞 、 江 荔 、 刘 晓 青 和 张 丹 等 参与 编写 了 部 分 章节 ,企业 专 
家 叶 建 雄 工程 师 对 本 书 也 提供 了 宝贵 的 意见 和 建议 ,在 此 一 并 向 他 们 表示 更 
心 的 感谢 。 由 于 网 站 开发 技术 发 展 迅 速 ,作者 水 平 有 限 , 书 中 难免 有 不 足 之 
处 ,欢迎 同行 专家 和 读者 批评 指正 。 


编 者 
2012 年 5 月 
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初 识 网 站 开发 


本 章 将 对 网 站 和 网 页 进行 较 全 面 的 介绍 ,引导 读者 认识 网 页 的 设计 要 素 , 从 而 知道 从 哪 
些 方面 去 欣赏 一 个 网 站 ,并 了 解 设计 网 页 时 要 注意 哪些 方面 。 另 外 ,本 章 还 将 介绍 网 站 开发 
的 基本 流程 。 

本 章 学 习 要 点 : 

(1) 了 解 网 站 和 网 页 

(2) 理解 网 站 LOGO 的 重要 性 

(3) 理解 网 站 导航 栏 的 作用 

(4) 理解 网 站 开发 的 基本 流程 


1.1 什么 是 网 站 和 网 页 


1.1.1 网 站 


对 于 经 常 上 网 的 人 来 说 ,网 站 ?是 再 熟悉 不 过 的 一 个 词汇 了 。 比 如 ,常用 的 搜狐 网 , 它 
是 一 个 为 全 球 用 户 24 小 时 提供 全 面 、 及 时 的 中 文 资讯 的 网 站 ; 百度 网 , 它 是 一 个 提供 搜索 
服务 的 网 站 ,可 让 用 户 快捷 地 找到 所 需要 的 东西 ; QQ 空间 , 它 具 有 博客 的 功能 ,算是 一 种 
个 人 网 站 ,用 户 在 QQ 空间 上 可 以 通过 多 种 方式 展示 自己 。 男 外 ,还 有 各 种 各 样 的 企业 网 
站 ,政府 网 站 ,给 用 户 提供 了 丰富 的 企业 信息 和 政府 信息 ,让 用 户 可 以 更 加 了 解 某 个 企业 或 
单位 。 网 站 是 因特网 上 的 一 种 信息 平台 ,人 们 可 以 通过 它 来 发 布 信息 或 者 通过 它 来 提供 网 
络 服务 。 网 站 给 和 人们 的 生活 带 来 很 大 的 便利 , 它 让 人 们 可 以 更 加 便捷 地 获取 各 种 各 样 的 信 
息 或 者 发 布 个 人 信息 ,是 现代 生活 中 不 可 缺少 的 一 种 平台 。 


1.1.2 网 页 


正如 一 本 书 由 多 页 组 成 ,一 个 网 站 也 是 由 多 页 组 成 的 ,网 站 中 的 一 页 叫做 “网 页 ”。 浏 览 
一 个 网 站 的 时 候 , 每 打开 一 个 浏览 器 窗口 ,看 到 的 就 是 网 站 中 的 一 个 网 页 。 在 每 个 网 页 上 ， 
可 以 看 到 各 种 各 样 的 内 容 , 如 文字 、 图 像 动画、 视频 等 ,有 时 还 能 听 到 声音 。 可 见 , 每 个 网 页 
上 可 以 展示 的 内 容 是 丰富 多 彩 的 ,这 一 点 完全 不 同 于 一 个 只 能 展示 文字 和 图 像 的 书页 。 当 
新 闻 等 信息 可 以 在 网 页 上 以 更 多 样 化 的 形式 展示 时 ,网 站 对 人 们 的 吸引 力 就 明显 超过 了 报 
纸 杂 志 这 样 的 传统 媒介 。 


1.1.3 网 站 和 网 页 的 存在 形式 
通过 网 络 看 到 的 .具有 漂亮 外 观 和 丰富 信息 的 网 页 以 及 由 它们 组 成 的 整个 网 站 ,是 存在 


媳 一 波 
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于 因特网 的 哪个 位 置 呢 ? 它们 又 以 什么 样 的 形式 存在 呢 ? 

众所周知 ,因特网 是 由 许 许多 多 的 计算 机 互联 而 成 的 ,而 每 一 个 网 站 ,包括 组 成 网 站 的 
每 一 个 网 页 ,事实 上 就 存在 于 因特网 中 的 某 一 台 计 算 机 上 。 因 特 网 上 用 来 存放 各 个 网 站 的 
各 台 计 算 机 都 叫做 网 站 服务 器 ,也 叫 Web 服务 器 。 至 于 网 站 服务 器 与 普通 家 庭 里 用 来 上 网 
的 计算 机 的 不 同 ,在 后 面 的 章节 将 会 介绍 。 

在 网 站 服务 器 中 ,网 页 以 文件 的 形式 存在 ,网 站 则 以 文件 夹 的 形式 存在 。 

图 1-1 中 ,流星 站 是 一 个 个 人 网 站 , 它 在 计算 机 中 的 形式 就 是 一 个 文件 来, 在 这 个 文件 
夹 里 面 又 有 “多 媒体 文件 “图像 文件 "“ 网 页 文件 ”3 个 子 文件 夹 ,在 “网 页 文件 "中 存放 了 
该 网 站 的 所 有 网 页 ,可 见 每 个 网 页 都 是 以 一 个 文件 的 形式 存在 。 在 默认 情况 下 ,网 页 文件 的 
图 标 跟 Windows 操作 系统 桌面 上 的 浏览 器 图 标 类 似 。 


[天 了 jl 
Ej 流星 站 图 六 文 件 
图 1-1 网 站 和 网 页 在 计算 机 中 的 存在 形式 


1.1.4 网 页 在 网 络 中 如 何 传 输 


每 个 网 页 都 是 某 台 计算 机 中 的 一 个 文件 , 它 里 面 可 能 包含 文字 、 图 像 . 动 画 、 视 频 、 声 音 
等 信息 。 当 浏览 网 页 时 ,网 页 中 包含 的 所 有 信息 从 远方 的 网 站 服务 器 出 发 ,通过 网 络 的 传 
输 , 最 后 到 达 用 户 的 计算 机 ,显示 在 浏览 器 上 。 

网 页 在 网 络 中 是 如 何 传输 的 呢 ? 

事实 上 ,每 个 网 页 都 是 由 一 些 代 码 组 成 的 ,而 网 页 代码 则 是 由 一 些 特 殊 的 计算 机 语言 
写 而 成 。 网 站 开发 者 使 用 这 些 语言 进行 编排 ,从 而 制作 出 网 页 。 当 网 页 在 网 络 中 传输 时 , 传 
输 的 其 实 就 是 这 些 代码 , 当 网 页 代码 到 达 浏 览 者 的 计算 机 时 ,由 浏览 器 对 它 进 行 翻译 ,最 终 
得 到 网 页 的 显示 效果 。 

编写 网 页 代码 所 使 用 的 语言 有 HTML JavaScript\ASP.PHP、JSP 等 ,对 于 制作 静态 
网 页 而 言 ,主要 使 用 的 是 HTML 语言 。 从 第 3 章 开始 将 对 HTML 进行 详细 介绍 。 


1.1.5 网 站 的 分 类 


网 站 可 以 最 简单 地 分 为 静态 网 站 和 动态 网 站 。 静 态 网 站 是 指 网 站 上 每 一 个 网 页 所 展示 
的 内 容 都 是 固定 的 ,包括 文本 、 图 像 动画、 视频 等 ,在 制作 网 站 时 就 设 定好 ,浏览 网 站 时 不 能 
改变 每 一 个 网 页 的 内 容 。 静 态 网 站 中 的 网 页 叫做 静态 网 页 。 动 态 网 站 是 什么 呢 ? 初学 者 经 
常会 以 为 ,有 显示 动画 的 网 站 就 是 动态 网 站 ,这 样 的 理解 是 错误 的 “动态 指 的 是 功能 上 的 
“ 动 ”, 而 不 是 画面 上 的 “ 动 "。 如 果 一 个 网 站 具有 与 浏览 者 进行 交互 的 功能 ,比如 注册 、 登 录 、 
留言 .搜索 等 ,那么 这 个 网 站 就 是 “动态 网 站 ”。 网 站 中 那些 实现 交互 功能 的 网 页 叫做 动态 网 
页 。 动 态 网 站 中 , 既 有 静态 网 页 ,也 有 动态 网 页 。 
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静态 网 页 和 动态 网 页 不 仅 在 功能 上 有 所 区 别 , 它 们 对 应 的 文件 图 标 一 般 情况 下 也 不 相 


同 。 静 态 网 页 的 文件 图 标 如 图 1-2 所 示 ,类似 于 浏览 


语 saacalma deline_updatel 
器 图 标 ; 而 动态 网 页 的 文件 图 标 一 般 跟 对 应 的 编辑 i 要 pe 
器 图 标 相似 。 比 如 ,在 计算 机 中 ,如 果 动 态 网 页 的 编 ”本 setintvl 人 

大 addinfo2 于 aalinftol 
辑 器 是 Dreamweaver 软件 ,那么 这 些 网 页 的 文件 图 多 stnts | 

团 saiinfo 园 aainfa 
标 就 跟 Dreamweaver 的 图 标 相 似 , 如 图 1-2 所 示 。 天 addinfo5 国 delinfo4 

于 addinfo6 园 duinte5 


作为 初学 者 , 一般 从 学 习 制作 静态 网 页 和 静态 网 
站 开始 。 本 书 介绍 的 内 容 全 部 是 有 关 静 态 网 站 开发 ”图 1-2 使 用 Dreamweaver 做 编辑 器 的 
的 技术 ,这 是 网 站 开发 的 基础 ,必须 在 掌握 了 网 站 开 恒 本 网 轴 
发 的 基础 知识 之 后 才能 继续 学 习 动 态 网 站 开发 技术 。 

网 站 还 可 以 根据 网 站 的 主题 分 为 以 下 几 类 。 

0) 资讯 门户 类 网 站 ,比如 搜狐 网 和 新 华 网 。 

(2) 企业 品牌 类 网 站 ,比如 苹果 中 国 和 联想 中 国 。 

(3) 政府 机 构 网 站 ,比如 中 国 福建 和 首都 之 窗 。 

(4) 社区 网 站 ,比如 天 涯 和 人 人 网 。 

(5) 交易 类 网 站 ,比如 淘宝 和 易趣 。 

(6) 游戏 类 网 站 ,比如 QQ 游戏 大 厅 。 

(7) 功能 类 网 站 ,比如 百度 和 Google。 

(8) 个 人 网 站 ,比如 漫画 家 炎炎 的 官方 网 站 。 

这 些 网 站 类 别 中 ,大 部 分 属于 商业 性 质 的 网 站 ,是 以 获得 经 济 效益 为 目的 的 网 站 。 


1.1.6 主页 和 子 页 


主页 ,也 叫 首页 , 指 的 是 一 个 网 站 的 起 始 页 , 即 打开 网 站 之 后 看 到 的 第 一 个 网 页 。 一 般 ， 
一 个 网 站 只 有 一 个 主页 ,除了 主页 之 外 ,网 站 中 其 他 的 网 页 都 叫 子 页 。 主 页 在 计算 机 中 的 文 
件 名 一 般 叫 index 或 者 default。 

主页 和 子 页 在 外 观 上 或 功能 上 有 什么 不 同 吗 ? 网 站 的 主页 既 显 示 网 站 的 名 称 , 又 显示 
网 站 的 所 有 栏目 标题 ,并 且 在 主页 上 还 会 划分 出 若干 个 版 块 显示 一 些 重要 栏目 的 最 新 内 容 。 
主页 就 像 一 本 书 的 封面 和 目录 一 样 , 它 结合 了 两 者 的 功能 ,如 图 1-3 所 示 ; 而 网 站 的 子 页 ， 
一 般 有 某 个 栏目 名 称 以 及 对 应 的 具体 内 容 , 如 图 1-4 所 示 。 注 意 ,在 主页 显示 网 站 名 称 的 位 


我 的 搜狐 疏通 行 证 帐号 /手机 注册 邮件 博客 相册 说 两 句 应 用 ~ 搜 矣 微 博 视 访 访 ,; 
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国 世界 顶 果 大 学 申请 一笑 风 在 下 月 的 训 你 的 生命 如 此 多 情 月 获 3000 招 幕 人 才 文人 更 年 期 怎么 办 。。 房 2995 节 烛 蒜 起 宣 4 件 套 


1-3 搜狐 网 主页 
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人 

北原 增多 沿线 楼 瘟 

寻访 甲午 战争 在 日 造物 “大 高 穿 ” 道 仿 共 高 豪 礼 大 智 辣 三 秒 串 屏 找 热 扶 将 木 沽 喜 灶 若 至 模 ! 美国 投资 移民 未 班车 美国 绿卡 与 投资 高 回报 

小 天 类 可 万 和 全 导 专 用户。 第 七 代 纪 革 瑟 轨 褒 。。 玫 天 所 女性 i 基 全 放下 世界 顶 病 iBl 理 程 。。 美 、 加 报 资 称 民 对 比 | 。。。 艺 才 保 过 第 训 无 效 退 于 

搜狐 新 闻 访谈 。 博客 。。 点 击 人 日 。 非 新 闻 。 无 不 至 二 训 慢 活 。。 快 试 。 新 闻 加 二 Ds 了 
IE 

news sohu com 评论 论坛。 数 守之 道 。 大 可 时 。 新 闻 关 条 视 坟 联 时 。。 专题 。 新 闻 快 和 20C~13C 给 风 


要 间 1 有 2 日 ws 搜狐 视频 。 让 


o 
动车 事故 调查 结果 翻 县 -管理 不 善 是 主因 [ea >、 
[ 嘎 夺 信号 起 牛 导致 事故 说 法 ， 贾 任 认定 需 时 日 报告 暂 检 公布 


[ 安 监 总 局 9 月 回应 请 可 结果 :不 各 着 语 查 组 ;形成 200 万 字 村 


图 1-4 搜狐 网 新闻” 栏目 子 页 


置 上 一 般 显 示 的 都 是 网 站 的 LOGO 一 一 代表 网 站 形象 的 一 个 标志 图 。 网 站 LOGO 的 作 
相当 重要 ,将 在 后 面 的 章节 进行 介绍 。 
网 站 开发 的 主要 任务 之 一 就 是 设计 和 制作 网 站 的 主页 和 各 个 子 页 。 


1.1.7 网 站 欣赏 


学 会 欣赏 一 些 精彩 的 网 站 , 且 将 它们 进行 对 比 , 获 得 一 些 体验 和 心得 ,并 能 提出 自己 
的 评论 观点 ,是 学 习 网 站 开发 的 第 一 步 。 本 书 提供 一 些 优秀 网 站 的 网 址 , 供 初学 者 进行 
赏析 。 

(1) 苹果 中 国 官网 : http://www. apple. com. cn/ 

(2) 易趣 网 : http://www. eachnet. com/ 

(3) 搜狐 网 : http://www. sohu. com/ 

(4) 首都 之 窗 : http://www. beijing. gov. cn/ 

(5) 漫画 家 炎炎 的 官网 : http://www. youthyear. com/ 

(6) 清华 大 学 网 站 : http://www. tsinghua. edu. cn/publish/th/index. html 

(7) BCIT 网 站 : http://www. bcit. ca/ 

(8) 网 龙 公司 网 站 : http://www. nd. com. cn/ 


1.2 网 页 界面 的 设计 要 素 


虽然 经 常 在 各 种 各 样 的 网 站 上 进行 浏览 ,但 是 一 个 网 页 界面 可 以 分 成 几 部 分 或 者 说 一 
个 网 页 界面 的 设计 要 素 有 哪些 ? 网 页 上 一 般 会 有 这 么 几 个 部 分 : 网 站 LOGO、 网 站 导航 栏 、 
若干 展示 板块 。 男 外 ,每 个 网 页 都 有 一 定 的 布局 结构 以 及 色彩 搭配 。 


1.2.1 网 站 LOGO 


LOGO 是 标志 的 意思 ,网 站 的 LOGO 即 网 站 的 标志 。 在 每 一 个 网 站 的 主页 上 ,都 能 见 
到 网 站 的 LOGO, 它 是 网 站 形象 的 重要 体现 。 一 个 好 的 LOGO 能 够 反映 出 网 站 的 某 些 信 
息 , 比 如 网 站 的 类 型 .内 容 和 风格 。 对 于 一 个 商业 性 质 的 网 站 来 说 ,网 站 LOGO 尤其 重要 ， 
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因为 它 能 够 吸引 更 多 人 的 眼球 ,增加 网 站 浏览 量 , 从 而 给 网 站 的 经 营 者 带 来 更 丰厚 的 经 济 效 


益 , 图 1-5 所 示 为 几 个 知名 网 站 的 LOGO。 搜狐 _ 

在 目前 的 国际 标准 规范 中 ,网 站 的 LOGO Sonu-eom OL 钢 、 
有 三 种 规格 。 

(1) 88mmX31mm, 这 是 互联 网 上 最 普遍 的 A 
LOGO 规格 。 


(2) 120mmX60mm, 这 种 规格 用 于 一 般 大 小 的 LOGO。 

(3) 120mmX90mm, 这 种 规格 用 于 大 型 LOGO。 

不 过 ,并 不 是 所 有 网 站 都 遵循 这 三 种 规格 ,大 部 分 网 站 的 LOGO 都 会 根据 自身 的 需求 
对 尺寸 进行 稍微 地 调整 。 


1.2.2 网 站 导航 栏 


网 站 导航 栏 就 像 一 本 书 的 目录 一 样 ,可 帮助 浏览 者 在 网 站 中 寻找 所 需要 的 信息 , 它 是 网 
页 界面 中 很 重要 的 一 个 元 素 。 一 个 导航 栏 中 包含 了 网 站 各 个 栏目 的 名 称 , 通 过 单 击 这 些 名 
称 就 可 以 快捷 地 找到 相关 的 内 容 。 导 航 栏 在 网 页 中 的 位 置 . 外 观 、 分 层 ,都 是 在 设计 的 时 候 
应 该 考虑 的 问题 。 

首先 是 导航 栏 的 位 置 。 一 般 情况 下 ,导航 栏 被 放置 在 主页 的 上 端 或 者 左边 的 位 置 , 比 如 
搜狐 网 把 导航 栏 放 在 了 主页 的 上 端 ,而 耐克 官网 则 把 导航 栏 放 在 主页 的 左边 。 放 在 主页 上 
端的 导航 栏 , 因 为 可 显示 的 空间 比较 宽 ,所 以 可 包含 比较 多 的 栏目 名 称 ; 放 在 主页 左 端的 导 
航 栏 ,由 于 高 度 有 限 ,所 以 不 适合 栏目 很 多 的 网 站 。 

其 次 是 导航 栏 的 外 观 。 目 前 ,国内 许多 大 型 网 站 的 导航 栏 都 不 太 注重 外 观 的 设计 ,主要 
是 追求 所 包含 的 栏目 数量 ,比如 一 些 资讯 门户 类 网 站 。 一 些 企业 品牌 类 网 站 对 导航 栏 的 设 
计 则 比较 用 心 ,比如 苹果 中 国 、 联 想 中 国 、 耐 克 官网 。 而 事实 上 ,一 个 外 观 设计 独特 的 导航 栏 
也 能 体现 一 个 网 站 的 魅力 ,从 而 提升 这 个 网 站 的 浏览 量 。 如 果 想 要 增加 导航 栏 的 设计 感 , 可 
以 在 每 个 栏目 名 称 前 添加 个 性 小 图 标 ,比如 易趣 网 的 导航 栏 , 如 图 1-6 所 示 。 不 过 ,这 种 设 
计 方 式 适 用 于 栏目 量 较 少 的 导航 栏 。 


中 国 亿 三 美国 从 日 ji 过。 澳大利亚 志 
图 1-6 易趣 网 的 导航 栏 
最 后 是 导航 栏 的 分 层 。 一 个 网 站 的 栏目 可 能 有 多 个 级 别 , 比 如 联想 中 国 , 一 级 栏目 有 个 
人 及 家 庭 用 户 、 成 长 型 企业 、 政 教 及 大 型 企业 、 服 务 与 驱动 下 载 . 会 员 、 商 城 ,其 中 ,个 人 及 家 
庭 用 户 又 分 出 二 级 栏目 : 笔记 本 电脑 ,分 体 台 式 电 脑 ,一 体 台 式 电 脑 .数字 家 庭 等 。 这 时 候 ， 
导航 栏 上 显示 的 是 一 级 栏目 ,然后 通过 给 一 级 栏目 添加 菜单 来 显示 二 级 栏目 ,比如 微软 中 国 


的 官方 网 站 ,也 在 导航 栏 中 添加 了 菜单 。 这 种 分 层次 的 导航 栏 , 一 般 出 现在 导航 栏 只 有 一 行 
的 情况 下 。 如 果 有 多 行 ,一 般 就 不 采用 这 种 设计 ,比如 腾讯 网 的 导航 栏 。 


1.2.3 网 页 版 面 布局 
每 个 网 页 都 要 有 合理 的 版 面 布局 , 才 会 让 网 页 上 的 内 容 看 上 去 更 有 条 理 , 不 会 混乱 。 这 
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一 点 ,很 像 出 黑板 报 , 先 给 整个 黑板 画 上 一 些 线条 规划 好 版 面 结 构 , 然 后 才 开 始 添 加 板报 
内 容 。 

网 页 的 版 面 布局 ,常见 的 有 工人 字形 ,三 字形 、 川 字形 等 ,比如 苹果 中 国 的 官网 主页 ,就 是 
三 字形 ,上 下 都 是 导航 栏 , 中 间 是 产品 展示 区 ; 中 国 猫 座 网 主页 是 字形 ; 个 人 网 站 * 虫 语 
花香 "(网址 www. chongchong. net) 则 是 川 字形 。T 字 形 的 那 一 竖 不 一 定 在 网 页 的 中 间 ,多 
数 情况 下 它 是 在 左边 或 右边 。 另 外 ,还 有 一 些 更 复杂 的 布局 结构 ,它们 往往 是 把 一 些 简单 的 
结构 混合 在 一 起 使 用 。 比 如 ,易趣 网 和 淘宝 网 的 主页 布局 ,都 混合 了 全 字形 和 三 字形 。 如 
果 制 作 的 是 简单 的 或 追求 个 性 的 网 站 ,比如 个 人 网 站 或 者 某 品牌 网 站 ,一般 就 选择 比较 简单 
的 网 页 布局 ; 如 果 是 大 型 的 资讯 类 网 站 或 其 他 商业 性 质 的 网 站 ,因为 网 页 上 要 展示 的 信息 
量 较 大 ,所 以 在 设计 页 面 时 ,一 般 采 用 比较 复杂 的 布局 。 


1.2.4 色彩 搭配 


一 般 网 页 的 界面 很 少 只 有 黑色 和 白色 ,大 部 分 情况 下 ,会 选择 多 种 色彩 进行 合理 搭配 ， 
使 得 整个 网 页 看 上 去 更 赏心悦目 ,从 而 提高 网 站 的 浏览 量 。 如 何 选 择 网 页 界面 的 色彩 ? 这 
不 是 一 件 容易 的 事情 ,但 有 一 点 可 以 肯定 , 那 就 是 网 页 界面 所 选用 的 色彩 必须 符合 网 站 的 主 
题 ,比如 ,海尔 集团 的 网 站 主页 ,选择 银灰 色 为 网 页 背景 ,突出 了 家 电 产 品 的 特点 ; 中 国旅 游 
网 的 主页 ,采用 白色 和 蓝 色 为 主 色 ,给 人 感觉 比较 轻松 和 清新 ,符合 旅游 这 个 主题 ; 个 人 网 
站 “ 虫 语 花 香 ” 的 主页 ,选用 白色 和 绿色 为 主 色 , 再 配 以 小 面积 的 鲜艳 颜色 ,给 和 人 如同 在 野外 
一 样 清新 的 感觉 ,符合 了 “ 虫 语 花 香 " 这 个 主题 。 

至 于 具体 的 色彩 选择 是 属于 另外 一 个 专业 范畴 的 任务 ,本 书 不 展开 专业 的 阐述 。 在 一 
个 网 站 开发 团队 中 ,一般 都 配 有 美术 专业 技术 人 员 来 完成 网 页 界面 设计 方面 的 任务 。 而 针 
对 网 站 开发 的 初学 者 ,本 书 只 介绍 一 些 简单 的 色彩 搭配 知识 ,归纳 为 以 下 几 点 。 

(1) 背景 应 选用 淡雅 或 简单 的 色彩 ,复杂 或 艳丽 的 背景 会 使 得 网 页 上 的 信息 看 不 清 。 

(2) 文字 色 不 宜 太 浅 或 太 艳 ,以 免 产 生 视 觉 疲劳 。 

(3) 装饰 性 的 颜色 不 宜 面积 太 大 ,否则 会 喧 宾 夺 主 ,破坏 网 页 的 整体 效果 。 

以 上 所 说 的 4 点 是 网 页 中 包含 的 三 大 要 素 。 一 般 来 说 ,主页 上 一 定 有 网 站 LOGO 和 导 
航 栏 ,而 子 页 上 却 未 必 有 这 两 个 部 分 ,但 是 子 页 上 一 定 会 有 对 应 的 栏目 标题 ,如 图 1-3 和 
图 1-4 所 示 。 网 页 界面 的 组 成 要 素 是 今后 在 设计 网 页 界面 图 时 需要 注意 的 重点 。 


1.3 网 站 开发 及 流程 


1.3.1 网 站 开发 


网 站 开发 是 指 一 个 专业 的 软件 开发 团队 根据 客户 对 网 站 界面 和 功能 的 要 求 ,使 用 各 种 
工具 软件 ,对 网 页 界面 和 网 站 功能 进行 设计 和 制作 ,最 终 创 造 出 一 个 网 站 作品 的 过 程 。 网 站 
开发 需要 写作 、 美 工 数据库、 编程 ,网络 等 多 方面 的 技术 ,可 以 分 为 静态 技术 和 动态 技术 两 大 
类 ,前 者 是 学 习 网 站 开发 的 基础 。 本 书 将 以 静态 网 站 开发 为 例 ,介绍 网 站 开发 的 基础 知识 。 

除了 技术 ,网 站 开发 的 过 程 中 ,还 需要 与 人 沟通 和 团队 协作 的 技巧 。 因 为 一 般 情况 下 ， 
越 是 复杂 的 网 站 开发 , 越 不 可 能 是 一 项 个 人 可 以 独立 完成 的 任务 , 它 要 求 团队 协作 完成 。 在 
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一 个 团队 中 ,会 根据 每 个 成 员 的 特长 进行 具体 的 分 工 : 有 人 负责 写 文档 ,有 人 负责 美工 设 
计 , 有 人 负责 写 代 码 , 有 人 负责 网 站 测试 等 。 整 个 过 程 需要 团队 内 部 成 员 之 间 以 及 内 部 和 外 
部 相关 人 员 进 行 有 效 地 沟通 。 

由 于 网 站 开发 是 一 项 比较 复杂 的 专业 性 任务 ,需要 一 定 的 时 间 规 划 和 分 配 任务 。 为 了 
加 快 开发 的 速度 以 及 降低 失误 的 几率 ,人 们 为 此 设置 了 一 定 的 开发 流程 ,以 确保 网 站 开发 任 
务 有 序 地 完成 ,降低 失败 的 风险 。 


1.3.2 网 站 开发 流程 


要 完成 一 个 网 站 的 开发 ,其 中 很 重要 的 一 个 任务 就 是 “设计 ”, 这 一 点 跟 房地产 开发 类 
似 。 众 所 周知 , 建 房 子 之 前 ,需要 先 画 好 房子 的 设计 图 。 同 样 地 ,制作 一 个 网 站 之 前 ,也 需要 
先 对 网 站 进行 设计 , 画 出 每 一 个 网 页 的 设计 图 。 

在 设计 之 前 ,还 要 进行 分 析 , 分 析 网 站 的 主题 ,类 型 .风格 功能、 业务 逻辑 等 ,这 叫 “ 需 求 
分 析 ”。 因 为 本 书 阑 述 的 是 网 站 开发 的 静态 技术 ,所 以 在 需求 分 析 环 节 只 涉及 网 站 主题 .类 
型 和 风格 ,其 他 的 属于 动态 网 站 开发 的 范畴 ,本 书 不 作 阐述 。 分 析 主 题 , 类 型 .风格 时 ,一 要 
根据 网 站 开发 的 经 验 , 二 要 根据 客户 的 要 求 。 比 如 ,为 一 个 公司 做 网 站 ,该 公司 就 是 客户 ,这 
个 网 站 的 名 字 、 类 型 ,界面 风格 等 要 求 主要 由 该 公司 提出 来 。 但 有 时 候 ,客户 不 能 很 清晰 地 
描述 自己 的 需求 或 者 不 能 准确 地 提出 要 求 ,这 种 情况 下 ,就 需要 开发 者 根据 网 站 开发 的 经 验 
给 对 方 一 些 意见 。 比 如 ,一 个 公司 派出 一 个 行政 助理 与 开发 者 进行 商谈 ,这 个 行政 助理 只 是 
告诉 开发 者 网 站 要 做 成 商业 性 质 的 ,要 符合 公司 的 形象 ,但 无 法 准确 地 提出 网 页 的 界面 风 
格 .颜色 ,布局 ,于 是 就 需要 开发 者 给 他 一 些 意见 。 可 见 , 在 需求 分 析 的 过 程 中 ,非常 需要 客 
户 与 网 站 开发 者 的 沟通 。 

完成 需求 分 析 之 后 ,开发 者 也 就 基本 确定 了 网 站 的 设计 方案 。 接 着 要 把 设计 方案 以 看 
得 见 的 形式 呈现 出 来 。 主 题 .类 型 和 风格 的 设计 主要 体现 在 网 页 界面 上 ,所 以 需要 画 出 网 页 
界面 的 设计 图 。 完 成 设计 图 之 后 ,就 可 以 按照 设计 图 制作 各 个 网 页 了 。 

网 页 制作 完成 ,并 不 意味 着 整个 网 站 的 开发 任务 就 结束 了 。 开 发 出 一 个 全 新 的 网 站 就 
好 像 工 厂 生产 出 一 个 全 新 的 产品 ,新 产品 一 般 都 要 经 过 一 个 试用 期 然后 才能 放心 地 投放 到 
市 场 中 ,网 站 也 一 样 。 必 须 对 一 个 刚刚 完成 的 网 站 进行 测试 , 即 把 这 个 网 站 放 到 一 个 小 范围 
的 网 络 上 ,让 一 小 部 分 人 来 使 用 它 ,看 看 网 站 的 功能 是 否 齐全 和 正常 ,是 否 存在 一 些 细节 上 
的 错误 等 。 完 成 了 网 站 的 测试 之 后 ,才能 比较 放心 地 把 它 发 布 到 较 大 范围 的 网 络 上 , 供 所 有 
的 人 浏览 和 使 用 。 

综 上 所 述 ,一 个 网 站 的 开发 流程 包括 了 需求 分 析 、 网 页 设计 、 网 页 制作 、 网 站 测试 网 站 
发 布 五 大 步 又。 以 静态 网 站 开发 为 例 , 每 个 步骤 要 完成 的 任务 大 致 如 下 。 

(1) 需求 分 析 : 与 客户 交流 ,引导 客户 正确 地 描述 自己 的 需求 ,并 编写 需求 分 析 文 档 。 

(2) 网 页 设计 : 制作 网 站 的 主页 界面 设计 图 以 及 若干 个 子 页 界面 设计 图 。 

(3) 网 页 制作 : 制作 网 站 主页 和 子 页 ,并 设置 各 个 网 页 之 间 的 跳 转 关系 。 

(4) 网 站 测试 : 试用 网 站 ,查找 网 站 上 可 能 存在 的 任何 问题 ,然后 加 以 修改 ,确保 网 站 
在 功能 上 完全 符合 客户 的 要 求 。 

(5) 网 站 发 布 : 把 整个 网 站 的 内 容 存 放 到 服务 器 上 ,让 网 络 上 的 其 他 计算 机 可 以 浏览 
该 网 站 。 


其 马 洲 
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本 章 将 介绍 需求 分 析 的 基本 方法 以 及 如 何 编写 需求 分 析 报 告 。 在 对 个 人 网 站 进行 需求 
分 析 之 后 ,进入 网 页 设计 阶段 ,将 介绍 Fireworks 软件 的 基本 操作 ,并 对 个 人 网 站 的 主页 和 
子 页 界面 进行 设计 。 

本 章 学 习 要 点 : 

(1) 了 解 需求 分 析 的 方法 

(2) 了 解 需求 分 析 报告 的 内 容 

(3) 掌握 Fireworks 软件 的 基本 操作 


2.1 需求 分 析 


通过 第 1 章 的 介绍 ,已 经 知道 需求 分 析 是 进行 网 站 开发 的 第 一 个 步骤 ,目的 是 确定 网 站 
开发 的 各 种 要 求 。 本 节 将 以 个 人 网 站 开发 为 例 ,介绍 需求 分 析 的 方法 以 及 如 何 编写 需求 分 
析 报 告 。 


2.1.1 如 何 进 行 需求 分 析 


一 个 网 站 的 开发 根据 各 种 各 样 的 需求 来 完成 ,其 中 绝 大 部 分 需求 来 自 客户 。 很 多 客户 
对 自己 的 需求 并 不 是 很 清楚 ,需要 网 站 开发 人 员 不 断 地 引导 、 帮 助 分 析 。 在 需求 分 析 的 过 程 
中 ,应 该 掌握 一 定 的 原则 和 方法 ,才能 与 客户 更 好 地 沟通 ,更 全 面 和 客观 地 了 解 网 站 的 需求 ， 
并 提高 工作 的 效率 。 

首先 ,要 确定 哪些 人 应 该 参与 需求 分 析 。 一 个 网 站 开发 团队 中 , 既 有 各 种 技术 人 员 ,又 
有 管理 者 。 是 不 是 只 要 管理 者 或 者 其 中 的 某 一 个 技术 人 员 与 客户 进行 沟通 就 可 以 了 呢 ? 当 
然 不 行 。 应 该 是 开发 团队 中 所 有 的 人 都 参与 到 需求 分 析 的 活动 中 。 这 样 做 至 少 有 两 个 好 
处 ,一 是 能 够 确保 与 客户 沟通 时 ,开发 方 提出 的 问题 尽量 详细 和 全 面 ,因为 每 个 开发 成 员 关 
心 的 问题 可 能 不 太一 样 ,综合 每 一 个 人 的 问题 ,得 到 的 需求 将 会 更 加 全 面 和 客观 ; 二 是 能 够 
保证 整个 团队 对 网 站 的 需求 达成 统一 的 认识 ,在 后 续 的 工作 中 ,团队 内 部 协作 时 会 更 加 
顺利 。 

其 次 ,要 确定 了 解 需求 的 渠道 。 一 般 通 过 与 客户 开会 ,对 用 户 进行 问卷 调查 、 对 市 场 进 
行 调研 等 多 个 渠道 来 了 解 需求 。 这 里 的 “用 户 ? 指 的 是 今后 网 站 的 使 用 群体 。 比 如 公司 办 公 
网 站 的 用 户 就 是 公司 的 全 体 员工 。 开 发 团队 与 客户 开会 的 时 候 , 应 该 做 好 会 议 记 录 ; 对 
户 进 行 问卷 调查 后 ,应 该 对 调查 资料 进行 统计 和 分 析 , 并 得 出 一 定 的 结论 ; 对 市 场 进行 调 
研 ,主要 是 了 解 市 场 上 同类 网 站 的 设计 和 使 用 情况 ,掌握 市 场 趋势 ,吸取 别人 的 优点 ,从 而 构 
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想 出 更 优秀 的 网 站 模型 。 通 过 多 种 渠道 了 解 , 也 是 为 了 确保 网 站 的 需求 更 加 全 面 和 客观 。 

最 后 ,要 确定 需求 分 析 的 目标 ,因为 这 决定 了 与 客户 沟通 以 及 做 问卷 调研 的 时 候 要 提出 
什么 问题 ,也 决定 了 做 市 场 调研 的 时 候 要 收集 哪些 材料 。 第 1 章 曾 经 提 到 ,开发 者 需要 分 析 
网 站 的 主题 ,类 型 .风格 功能、 业务 逻辑 等 。 具 体 而 言 ,需求 分 析 的 目标 就 是 确定 网 站 的 主 
题 , 界 面 , 功 能 、 权 限 、 完 成 时 间 、 后 期 维护 责任 等 。 开 发 者 要 向 客户 提出 的 问题 ,问卷 .市场 
调研 ,都 应 该 紧 紧 围绕 这 些 目 标 来 设计 。 

一 次 成 功 的 需求 分 析 是 开发 团队 和 客户 共同 努力 的 结果 。 需 求 分 析 最 终 要 求生 成 一 份 
文档 一 一 需求 分 析 报告 ,并且 由 客户 签字 确认 ,以 避免 今后 出 现 不 必要 的 纷争 。 


2.1.2 需求 分 析 报 告 


编写 需求 分 析 报 告 的 目的 是 为 了 确保 客户 方 和 开发 方 对 网 站 的 需求 在 理解 上 达成 一 
致 ,降低 网 站 开发 的 风险 。 需 求 分 析 报 告 没有 固定 的 格式 ,不 同 的 网 站 开发 公司 编写 的 报告 
不 完全 相同 。 但 是 ,在 所 有 的 需求 分 析 报 告 中 ,仍然 能 找 出 一 些 相似 的 内 容 描述 ,这 些 描 述 
涵盖 了 网 站 名 称 .客户 名 称 、 开 发 负责 人 、 编 写 目 的 、 功 能 需求 .界面 要 求 、. 运 行 环 境 要 求 、 质 
量 要 求 .验收 要 求 等 。 

1. 网 站 名 称 

一 个 网 站 也 称 为 一 个 项 目 , 所 以 网 站 名 称 有 时 也 称 为 项 目 名 称 。 网 站 名 称 就 是 网 站 的 
主题 ,比如 ,漫画 家 炎炎 的 网 站 名 称 是 “花样 ， 年华”, 北 京 市 政务 门户 网 站 名 称 是 “首都 之 
窗 ”, 一 般 的 校园 网 站 名 称 都 是 校 名 ,公司 网 站 名 称 则 是 公司 名 。 

2. 客户 名 称 

客户 名 称 也 称 用 户 名 称 , 就 是 网 站 开发 的 委托 方 。 比 如 ,开发 一 个 校园 网 站 ,委托 方 一 
般 就 是 该 学 校 ,所 以 用 户 名 称 就 是 该 校 的 名 字 。 

3. 开发 负责 人 

开发 负责 人 是 指 网 站 开发 团队 中 的 负责 人 ,将 对 开发 团队 进行 管理 ,监督 网 站 的 开发 进 
度 ,在 整个 网 站 的 开发 过 程 中 起 来 指导 作用 。 

4. 编写 目的 

需求 分 析 报 告 的 编写 目的 一 般 大 同 小 异 ,为 了 方便 客户 和 开发 团队 对 网 站 的 需求 进行 
理解 和 交流 。 

5. 功能 需求 

一 般 , 功 能 需求 描述 是 需求 分 析 报 告 中 的 一 个 重点 , 它 包 括 总 体 功 能 的 描述 、 功 能 模块 
的 描述 、 网 站 权限 的 描述 等 。 

6. 界面 要 求 

界面 指 的 是 网 页 的 界面 。 一 般 客户 最 关心 的 是 网 站 的 主页 界面 设计 ,因为 它 代表 了 整 
个 网 站 外 观 的 风格 。 但 是 客户 一 般 无 法 对 界面 做 出 具体 的 描述 ,只 能 从 颜色 和 字体 方面 提 
一 些 比较 模糊 的 要 求 。 另 外 ,在 显示 真正 的 主页 之 前 是 否 需要 一 个 导入 页 面 ,是 否 需 要 使 用 
Flash 来 制作 主页 ,这 些 要 求 也 可 以 在 这 一 部 分 进行 说 明 。 

7. 运行 环境 要 求 

运行 环境 一 般 指 网 站 运行 时 所 需要 的 硬件 条 件 和 软件 条 件 , 也 就 是 网 站 服务 器 的 硬件 
配置 ,操作 系统 配置 和 其 他 相关 软件 的 配置 。 
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8. 质量 要 求 

在 质量 要 求 这 一 部 分 ,一 般 会 要 求 网 站 功能 完整 并 且 易 用 ,网 站 信息 准确 并 且 清 晰 , 运 
行 稳定 且 易 维护 等 。 

9. 验收 要 求 

验收 要 求 将 说 明 验 收 的 依据 和 时 间 。 

一 般 到 某 网 站 开发 公司 工作 ,都 需要 了 解 该 公司 使 用 的 需求 分 析 报 告 格式 ,按照 公司 的 
具体 要 求 来 编写 需求 分 析 报告 。 


2.1.3 个 人 网 站 需求 分 析 


以 个 人 网 站 开发 为 例 ,网 站 需求 主要 来 自 个 人 ,开发 团队 通过 与 委托 人 进行 若干 次 沟通 
之 后 就 可 以 着 手 编写 需求 分 析 报 告 。 假 设 张 三 想 要 创建 个 人 网 站 “爱心 屋 ”, 而 李 四 是 网 
站 开发 团队 的 负责 人 ,通过 双方 沟通 之 后 编写 需求 分 析 报 告 如 下 。 报 告 使 用 Word 软件 


编写 。 
《爱心 屋 ) 网 站 需求 分 析 报 告 
项 目 名 称 爱心 屋 
客 户 名 称 张 三 
项 目 负 责 人 李 四 
编写 日 期 : 2011-11-1 


校对 日 期 : 2011-11-15 

审核 日 期 : 2011-11-22 

批准 日 期 : 2011-11-24 

:于 

1.1 文档 介绍 

在 此 文档 中 ,详细 介绍 了 开发 此 个 人 网 站 的 功能 性 需求 和 非 功 能 性 需求 ,同时 说 明了 此 
网 站 的 软 、 硬 件 环境 需求 。 

1.2 编写 目的 

为 明确 网 站 需求 ,方便 客户 和 开发 团队 进行 理解 和 交流 而 撰写 此 文档 。 本 文档 的 读者 
为 此 个 人 网 站 的 开发 人 员 。 

2. 功能 需求 

2.1 功能 划分 

本 网 站 属于 个 人 网 站 ,网 站 名 称 为 “爱心 屋 ”, 主 要 有 “爱心 屋 主 ”“ 爱 心 美 文 "“ 爱 心 风 
景 "“ 爱 心 之 声 ”4 个 栏目 ,主要 介绍 有 关爱 心 的 一 些 文章 、 图 像 和 新 闻 。 


2.2 功能 描述 
(1) 爱心 屋 主 


本 栏目 以 图 文 的 方式 对 网 站 主人 进行 介绍 。 
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(2) 爱心 美文 

本 栏目 以 标题 链接 的 方式 展示 多 篇 有 关爱 心 的 精彩 文章 。 

(3) 爱心 风景 

本 栏目 以 大 图 像 加 热点 链接 的 方式 展示 多 张 有 关爱 心 的 图 像 。 

(4) 爱心 之 声 

本 栏目 以 标题 链接 的 方式 展示 多 条 有 关爱 心 的 国内 新 闻 。 

3. 非 功 能 性 需求 

3.1 用 户 界面 需求 

(1) 首页 显示 : 首页 直接 显示 ,不 需要 导入 页 面 。 

(2) 页 面 风格 : 以 绿色 和 白色 为 主 色调 ,要 求 具有 清新 淡雅 的 风格 。 

(3) 页 面 字 体 显 示 : 以 黑色 为 主 。 

3.2 软 、 硬 件 环境 需求 

(1) CPU: 1.0GHz 以 上 (推荐 ) 。 

(2) 内 存 : 1GB 以 上 (推荐 ) 。 

(3) 操作 系统 : Windows Server 2003 及 以 上 版 本 

3.3 产品 质量 需求 

(1) 易 用 性 : 要 求 网 站 用 户 浏览 时 导航 明确 ,符合 一 般 用 户 的 浏览 习惯 。 
(2) 正确 性 : 要 求 网 站 中 所 展示 的 全 部 信息 准确 有 效 , 禁 止 遗 漏 、 重 复 、 丢 失 。 
(3) 清晰 性 : 要 求 所 展示 的 全 部 信息 分 类 明确 、 浏 览 清晰 。 


客户 签字 确认 : _ 张 三 


< 使 任务 2.1 


内 容 : 使 用 Word 软件 ,编写 一 个 个 人 网 站 的 需求 分 析 报 告 。 
建议 : 若是 进行 课堂 教学 ,可 要 求学 生 两 两 配对 , 互 为 对 方 客户 ,以 对 方 的 要 求 来 编写 
个 人 网 站 需求 分 析 报 告 。 


2.2 界面 设计 


2.2.1 网 页 界面 设计 原则 


在 完成 了 个 人 网 站 的 需求 分 析 之 后 ,进入 个 人 网 站 的 网 页 界面 设计 步骤 。 在 这 个 阶段 ， 
应 该 把 握 以 下 几 个 原则 。 

(1) 主页 上 一 定 要 有 网 站 的 LOGO 和 网 站 的 导航 栏 。 

(2) 主页 上 一 般 需要 设计 一 些 信息 展示 区 ,包括 栏目 标题 和 主要 内 容 , 但 是 在 设计 的 时 
候 , 这 个 展示 区 是 空白 的 。 

(3) 每 个 网 页 上 一 般 都 有 一 定 的 背景 设计 或 者 起 修饰 作用 的 插图 。 

(4) 子 页 和 主页 的 风格 要 一 致 ,必须 符合 网 站 主题 ,使 整个 网 站 显得 统一 而 协调 。 

下 面 是 两 个 设计 失败 的 网 页 界面 。 
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图 2-1 展示 的 是 一 个 主页 的 界面 ,界面 中 设计 了 网 站 的 名 字 “ 盛 夏 。 光 年 ”导航 栏 以 及 
一 个 信息 展示 区 。 这 个 设计 存在 的 问题 是 展示 区 应 该 是 空白 的 ,里 面 的 信息 应 该 在 制作 网 
页 的 时 候 才 添加 ,而 不 是 在 设计 界面 的 时 候 添加 。 换 名 话说 ,信息 展示 区 的 内 容 不 是 需要 设 
计 的 内 容 。 这 是 初学 者 经 常会 犯 的 错误 。 


图 2-1 主页 界面 示例 1 


图 2-2 展示 的 也 是 一 个 主页 界面 ,界面 中 设计 了 网 站 的 导航 栏 和 一 个 信息 展示 区 ,但 是 
却 没有 设计 网 站 的 名 字 ,这样 是 不 行 的 。 网 站 名 字 就 像 商 品 的 商标 一 样 ,不 可 缺少 。 


E79 加 由 


， 朋 友 


图 2-2 主页 界面 示例 2 
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2.2.2 认识 Fireworks 


Fireworks 是 目前 市 场 上 流行 的 一 款 网 页 图 像 制 作 和 处 理 软 件 , 自 1997 年 Macromedia 
公司 发 布 Fireworks 1.0 版 本 以 来 ,经 过 了 十 几 年 的 发 展 ,现在 已 经 发 布 了 CS5 版 本 。 这 期 
间 ,Macromedia 公司 被 Adobe 公司 收购 ,所 以 现在 Fireworks 也 叫 Adobe Fireworks。 

在 本 书 中 ,将 使 用 Fireworks CS5 来 完成 网 页 制作 。 

1. 安装 Fireworks 

(1) 双击 Fireworks CS5 的 安装 程序 ,进入 安装 界面 ,如 图 2-3 所 示 。 


mM Adobe Fireworks CS5 


[人 | 欢迎 使 用 


Ahe | Adobe Fireworks CS5 安装 程序 


Adobe 软件 许可 协议 
ADOBE 
软件 许可 协议 


用 户 须 知 : 请 他 兆 阅 读本 协议 ， 本 软件 的 所 有 或 任何 部 分 一 经 复制 、 安 装 或 使 用 ,您 即 接受 本 协议 中 规定 的 所 有 
条 款 和 条 件 ， 尾 列 是 其 中 对 下 列 内 容 的 规定 : 可 转让 性 ( 第 4 条 ) 、 担 保 ( 第 6 和 第 7 条 ) 、 责 任 ( 第 8 条 ) 以 及 连 
按 性 和 隐私 ( 第 14 条 ) ， 以 及 特 萄 规定 和 例外 ( 第 16 条 ) 。 悠 同意 本 协议 与 由 您 签署 的 任何 通过 谈判 洒 立 的 任何 
书面 协议 一 样 。 丰 协议 对 您 和 取得 软件 并 由 他 人 代表 使 用 相 软 件 的 任何 法 人 实体 均 可 执行 : 例如 您 的 塞 主 ( 如 果 
适用 ) 。 加 不 同意 本 协议 的 条 款 ， 请 不 要 使 月 本 软件 。 有 关 本 软件 退回 和 人 退 寺 的 信息 ,请 浏览 
http./www.adot'e.com/go/support cn 


您 可 以 与 ADOBE 直 接 订立 另 一 书面 协议 ( 加 批量 许可 证 协议 )， 补 充 或 着 换 本 协议 的 全 部 或 任何 部 分 。 


ADOBE 及 其 供应 商 拥有 本 软件 的 所 有 知识 产权。 本 软件 只 供 许可 使 用 ， 不 得 出 售 。ADOBE 只 区 许 悠 在 遭 守 本 协 
议 各 项 条 款 的 情况 下 复制 使 用 、 下 载 、 安 装 、 使 用 或 以 其 他 方式 受 共 于 本 软件 的 功能 或 知 识 产权 。 使 用 本 软件 所 
包含 的 ， 或 通过 本 软件 访问 的 一 些 ADOBE 和 在 ADOBE 村 料 与 服务 ， 可 能 需 遵 守 其 他 条 款 与 条 件 ， 这 些 条 款 与 条 
件 一 般 载 于 单独 的 许可 协议 、 使 用 条 款 ， 或 该 材料 或 服务 内 部 或 周围 的 自述 文件 中 , 或 可 在 
httpJwww.adote.com/golithirdparty cn 上 拷 到。 您 可 以 在 读 网 站 上 找到 关于 非 ADOBE 材 料 的 必要 声 级 ， 


本 软件 可 能 导致 容 的 计算 机 自动 演 接 到 因 特 辣 。 有 关 其 地 信息 ,请 参见 第 14 和 16 条 。 


图 2-3 Fireworks CS5 安装 界面 1 


(2) 单 击 “接受 ?按钮 ,进入 下 一 步 。 

(3) 输入 序列 号 ,并 选择 语言 为 “简体 中 文 ”, 单 击 “ 下 一 步 "按钮 。 

(4) 在 “输入 Adobe ID” 界 面 中 ,可 以 选择 创建 Adobe ID, 也 可 以 跳 过 此 步骤 。 

(5) 接 下 来 进入 “安装 选项 "界面 ,在 “位 置 " 栏 中 , 单 击 右 边 的 文件 夹 图 标 , 设 置 或 更 改 
程序 的 安装 位 置 ,如 图 2-4 所 示 。 

(6) 单 击 “ 安 装 ” 按 钮 ,进入 “安装 进度 ”界面 ,等 待 几 分 钟 ,Fireworks CS5 安装 完成 ,出 
现 “ 谢 谢 ” 界 面 。 单 击 “ 完 成 "按钮 , 即 结束 Fireworks CS5 的 安装 。 

2. Fireworks 的 编辑 界面 

图 2-5 是 Fireworks 的 编辑 界面 。 最 上 面 一 行 是 “文件 ”“ 编 辑 ”"、“ 视 图 ”等 菜单 , 单 击 
菜单 可 以 看 到 更 多 的 Fireworks 提供 的 命令 或 者 功能 ; 左边 一 列 是 Fireworks 工具 箱 , 主 要 
分 为 选择 ,位 图 、 矢 量 、Web、 颜 色 、 视 图 六 大 类 ; 中 间 部 分 是 图 像 的 主要 编辑 窗口 ,窗口 的 左 
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mM Adobe Fireworks CS5 


所 有 组 件 


园 ADosE FIREwoRKks cs5 国 ApossnRgEwonkscss 


本 Adobe CSXS Extensio. 
喜 Adobe AIR 
YAdobe Media Player 


V Adobe Fonts Recomm 


安装 总 大 小 : 668 MB 


图 2-4 Fireworks CS5 安装 界面 2 


当 Q [Do ,| 展开 模式 »| 区 于 | 
文件 (日 ”编辑 (E) 视图 (W 选择 (3) 修改 (MW) 文本 ( 力 命令 ( 口 ” 滤 模 (DD 窗口 (W) 帮 - 
口上 日 加 由 已 岛 内 和 口 SD © 


进 短 || 和 千 加 开间 [D2 二 | D1 


1 500 x 313 


图 2-5 ”Fireworks 的 编辑 界面 


上 角 显 示 图 像 文件 名 ,默认 是 “未 命名 -n. png”, 文 件 名 下 面 一 行 提供 了 图 像 的 两 种 查看 方 
式 ,“ 原 始 ” 显 示 编辑 状态 下 的 图 像 ,“ 预 览 " 显 示 的 图 像 是 不 可 以 编辑 的 ; 编辑 窗口 下 方 默认 
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显示 的 是 属性 面板 ,当选 择 图 像 中 不 同 对 象 时 ,属性 面板 显示 的 属性 是 不 同 的 ; 编辑 界面 的 
右边 是 其 他 一 些 常用 的 工具 面板 ,比如 * 优 化 "“ 层 "“ 资 源 "“ 颜 色 ? 等 面板 , 单 击 这 些 面板 
左上 角 的 黑色 小 三 角形 可 以 展开 或 者 收 起 面板 ,这 个 操作 同样 适用 于 属性 面板 。 


2.2.3 Fireworks 的 基本 操作 


1. 新 建 图 像 

选择 “文件 ”>“ 新 建 " 命 令 , 出 现 “ 新 建文 档 " 对 话 框 ,如 图 2-6 所 示 , 主 要 设置 宽度 、 高 度 
和 画布 颜色 。 宽 度 和 高 度 的 单位 默认 是 像素 ,无 须 修改 ; 而 宽度 和 高 度 的 大 小 则 根据 需要 
来 设置 。 如 果 新 建 的 是 一 个 网 页 界面 设计 图 ,其 宽度 和 高 度 的 设置 与 计算 机 屏幕 的 分 辩 率 
有 关 。 


画布 大 小 : 3. 钢 
宽度 吕 : 1260 || 储 来 ~| 宽 : 1260 
高 度 虽 : |800 | | 便 素 Y| 高 : 800 
全 曙 率 四 :|72 | | 像素 /英寸 ~ 


画布 颜色 
[os 
口 适 明 吕 ) 
口 自 定 义 @: 


图 2-6 “新 建文 档 " 对 话 杠 


一 般 计 算 机 屏幕 的 分 辩 率 最 低 是 800X 600 像素 ,其 中 800 指 的 是 宽度 。 假 设计 算 机 屏 
幕 分 辩 率 设置 为 最 低 , 若 浏览 一 张 800X600 像素 的 图 像 ,那么 它 将 刚好 占 满 整个 屏幕 。 如 
果 图 像 宽 度 超过 800 像素 ,比如 是 900 像素 ,那么 浏览 该 图 像 的 时 候 , 整 个 屏幕 无 法 将 它 全 
部 显示 ,会 看 到 图 像 查看 器 的 下 方 出 现 水 平 滚动 条 。 如 果 图 像 高 度 超过 600 像素 ,也 是 一 样 
的 道理 。 但 是 ,如 果 把 计算 机 屏幕 的 分 辩 率 设置 得 更 高 一 些 , 比 如 1024X768 像素 ,这 样 一 
张 900X700 像素 的 图 像 也 能 完整 地 显示 在 屏幕 上 。 

在 浏览 一 个 网 页 的 时 候 , 一 般 不 会 要 求 它 的 高 度 跟 计 算 机 屏幕 的 高 度 一 样 , 因 为 拖 着 垂 
直 深 动 条 向 下 阅读 是 大 部 分 人 都 能 接受 的 事情 。 不 过 ,大 部 分 人 都 不 会 喜欢 网 页 的 宽度 超 
过 计算 机 屏幕 的 宽度 , 换 句 话说 ,网 页 在 水 平方 向 上 的 内 容 最 好 能 够 完整 地 显示 在 屏幕 上 。 
所 以 ,一 个 网 页 界面 设计 图 的 宽度 是 需要 关心 的 ,而 高 度 完全 可 以 根据 网 页 展示 信息 的 多 少 
来 确定 。 

从 理论 上 来 说 ,如 果 网 页 界面 的 宽度 小 于 或 等 于 800 像素 就 是 符合 要 求 的 。 但 是 , 当 
1024X768 像素 成 为 屏幕 分 辨 率 的 设置 主流 时 ,950 像素 的 宽度 就 成 了 市 场 上 流行 的 网 页 设 
计 标 准 。 

事实 上 , 随 着 计算 机 屏幕 变 得 越 来 越 大 ,分 辩 率 越 来 越 高 ,网 页 界面 大 小 的 标准 也 在 不 
断 地 发 生变 化 。 所 以 说 ,作为 一 个 网 页 界面 的 设计 者 ,一 方面 要 关心 市 场 上 计算 机 屏幕 的 发 
展 趋势 ; 另 一 方面 ,也 可 以 在 设计 图 的 下 方 注 明 最 佳 分 辩 率 ,以 提醒 浏览 者 如 何 得 到 最 佳 的 
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浏览 效果 。 

至 于 画布 的 颜色 , 它 决定 了 网 页 界面 的 背景 色 , 可 以 根据 实际 需求 来 设置 。 如 果 设 计 的 
网 页 界面 背景 是 一 张 导 和 人 的 图 像 ,那么 画布 设置 为 何 种 颜色 就 无 关 紧 要 了 。 

单 击 “ 确 定 ” 按 钮 之 后 ,就 创建 了 一 个 全 新 的 图 像 ,在 编辑 窗口 看 到 的 是 一 个 空白 的 画 
布 ,等 待 着 开发 者 发 挥 创意 进行 创作 。 

2. 保存 图 像 

选择 "文件 ”保存 ”命令 ,出 现 * 另 存 为 "对 话 框 ,如 图 2-7 所 示 。 在 这 个 对 话 框 中 , 需 
要 选择 将 图 像 “ 保 存在 "计算 机 的 哪个 文件 夹 中 ,并 且 需 要 输入 “文件 名 ”。 文 件 的 保存 类 型 
默认 为 “Fireworks (* . png)”, 无 须 修改 。 


保存 在 四; | 办公 E:) 一 @ 放 己 国 - 


hobby 
rork 


E577 图 


Fireworks (*. png) Y 取消 


图 2-7 “另存 为 "对话 框 


假设 输入 的 文件 名 是 “主页 界面 ”, 设 置 完 成 后 单 击 “ 保 存 ” 按 钮 ,图 像 即 被 保存 ,在 图 像 
编辑 窗口 的 左上 角 , 显 示 的 文件 名 就 变 为 “主页 界面 . png”。PNG 是 图 像 的 类 型 或 者 叫做 图 
像 的 格式 ,也 是 图 像 文件 的 后 级 名 。Fireworks 创建 的 图 像 文件 都 默认 为 PNG 格式 。 如 果 
在 Fireworks 中 编辑 一 个 非 PNG 格式 的 图 像 , 编辑 结束 时 务必 记得 把 图 像 另存 为 
“Fireworks (x*. png)” 类 型 ,这样 才能 确保 将 Fireworks 中 的 编辑 信息 全 部 保存 下 来 。 在 
后 面 的 章节 ,将 更 深刻 地 体会 这 一 点 。 

3. 输入 文字 

输入 文字 ,使 用 的 是 "文本 ”工具 。 单 击 * 矢 量 ? 工 具 箱 中 的 “文本 ”工具 加 | ,然后 移动 鼠 
标 指针 到 图 像 编辑 窗口 ,在 需要 输入 文本 的 地 方 单 击 就 可 以 输入 文字 。 一 般 输入 文字 之 后 ， 
还 需要 对 文字 的 外 观 进行 一 些 调整 和 修饰 ,这 时 需要 用 到 属性 面板 。 

首先 , 单 击 选择? 工具 箱 中 的 “指针 ?工具 览 ,这 时 刚才 输入 的 文字 块 就 处 于 被 选中 的 
状态 ,并且 属性 面板 上 会 出 现 与 文字 有 关 的 属性 ,如 图 2-8 所 示 。 

注意 ,设置 文字 属性 之 前 ,必须 先 选中 文字 块 。 

其 次 ,通过 属性 面板 ,可 以 设置 文字 的 字体 ,大 小 、 颜 色 等 。 
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[3 | 楷体 _6B2312 eeulsr | 

weleome jio ”| 于 [zo jx | 匡 [7 [Vj] 苹 
0 六 是 贡生 
6 口 EnREsE | 


图 2-8 文字 属性 面板 


(1) 设置 字体 

文字 的 默认 字体 一 般 是 “宋体 ”, 单 击 “ 字 体 ” 栏 ,选择 某 一 个 字体 即 可 。 注 意 , 当 光标 指 
向 某 个 字体 的 时 候 ,右边 会 出 现 文字 的 预览 效果 ,如 果 是 空白 或 者 是 其 他 非 文 字 的 符号 出 
现 , 则 说 明 这 个 字体 不 适合 要 修饰 的 文字 ,应 该 男 选 一 个 字体 。 

(2) 设置 大 小 

字体 栏 右 侧 的 数字 框 用 来 设置 字体 的 大 小 ,可 以 通过 在 数字 框 中 直接 输入 来 改变 字体 
大 小 ; 也 可 以 通过 单 击 数字 框 右边 的 下 三 角 按钮 ,然后 上 下 拖 动 滑 块 ,从 而 修改 字体 大 小 。 

(3) 设置 文字 颜色 

设置 文字 大 小 的 数字 框 右 侧 就 是 设置 文字 颜色 的 按 
钮 , 单 击 该 按钮 会 出 现 一 个 色 盘 ( 见 图 2-9)。 这 时 光标 变 成 
一 个 吸管 的 形状 ,移动 吸管 到 某 一 个 色 块 上 ,然后 单 击 ,就 
可 以 改变 文字 的 颜色 。 

如 果 把 吸管 移 到 色 盘 的 外 部 ,比如 图 像 编 辑 窗 口中 , 单 
击 某 种 颜色 ,那么 文字 就 会 被 设置 为 这 种 颜色 。 

在 色 盘 上 端 , 有 一 个 数字 框 ,显示 以 “# ”开头 的 一 串 6 
位 数字 ,这 个 是 颜色 的 数字 代码 。 每 一 种 颜色 都 有 一 个 数 
字 代码 。 如 果 知 道 某 一 种 颜色 的 数字 代码 ,也 可 以 直接 输 
入 这 个 数字 框 来 设置 文字 的 颜色 。 

单 击 色 盘 底部 的 “填充 选项 ”按钮 ,还 可 以 改变 文字 颜色 的 填充 类 别 ,如 图 2-10 所 示 。 
上 默认 情况 下 ,文字 颜色 是 “实心 ”的 填充 方式 ,还 可 以 选择 "网 页 拌 动 "“ 渐 变 ”" 和 “图 案 ” 三 种 
类 别 。 这 四 种 类 别 中 ,一般 都 有 关于 * 边 缘 ” 和 ”纹理 ”的 设置 “边缘 "设置 文字 边缘 的 显示 
效果 光 纹 理 ? 则 设置 文字 内 部 的 纹理 效果 。 另 外 ,如 果 选 择 的 是 “渐变 ”, 还 可 以 进一步 选择 
“线性 "“ 放 射 状 "“ 和 矩形 ”等 渐变 效果 ,并 通过 “编辑 ”按钮 来 调整 渐变 的 颜色 。 

在 “渐变 ”填充 的 设置 对 话 框 中 , 单 击 “ 编 辑 ” 按 钮 ,将 看 到 颜色 调整 栏 ,左右 两 侧 各 一 个 
色 桶 ,如 图 2-11 所 示 。 单 击 色 桶 ,可 以 修改 渐变 的 颜色 ; 单 击 两 个 色 桶 之 间 的 任何 一 个 位 
置 ( 此 时 光标 右 下 角 出 现 一 个 “十 ”) ,可 以 增加 色 桶 ; 左右 拖 动 某 个 色 桶 ,可 以 改变 渐变 的 效 
果 ; 把 新 增 的 色 桶 向 上 或 向 下 拖 动 直 至 不 见 , 即 意味 着 色 桶 被 删除 。 


图 2-10 填充 选项 图 2-11 渐变 选项 


CF L181 网 站 开发 基础 教程 


(4) 设置 文字 间距 

“字体 ” 栏 下 方 的 数字 框 用 来 设置 文字 间距 。0 表示 正常 间距 ,输入 0 以 上 的 一 个 数字 ， 
就 可 以 让 每 个 字 之 间 的 距离 变 大 ,反之 让 字 距 缩小 。 

(5) 设置 文字 行距 

字 间 距 设置 框 的 右 侧 是 “ 字 顶 距 ” 设 置 框 。 如 果 文 字 块 中 有 多 行 , 那 么 这 里 可 以 设置 行 
之 间 的 距离 。100% 表 示 正 常 行距 , 往 上 和 往 下 调整 分 别 代表 增加 和 缩小 行距 。 

(6) 设置 文字 宽度 

合 图 标 右 侧 的 数字 框 用 来 设置 文字 块 中 每 一 个 字 的 宽度 。100% 代 表 正 常 宽度 , 往 上 
和 往 下 调整 分 别 代表 增加 和 缩小 文字 宽度 。 

(7) 设置 文字 边缘 颜色 

单 击 现 图 标的 右 侧 将 出 现 一 个 色 盘 ,用 来 设置 文字 边缘 线条 的 颜色 。 默 认 情 况 下 
是 | 的 状态 ,代表 透明 无 色 。 

以 上 是 文字 常用 属性 的 设置 ,其 他 属性 的 设置 类 似 于 Word 软件 ,在 这 里 就 不 著述 了 。 

如 果 需 要 输入 特殊 字符 , 单 击 “ 窗 口 " 菜 单 , 选 择 “ 特 殊 字 符 ” 菜 单项 ,打开 “特殊 字符 ” 面 
板 , 单 击 要 输入 的 字符 即 可 。 如 果 输 入 的 特殊 字符 看 不 到 ,只 看 到 一 个 空格 或 者 是 其 他 非 文 
字 的 符号 ,就 把 这 个 空格 或 符号 选中 ,然后 在 属性 面板 上 选择 一 个 英文 的 字体 即 可 。 

4. 导入 图 像 

选择 “文件 ”>“ 导 入 ”命令 ,在 “查找 范围 ”的 右边 或 者 下 面 找到 图 像 所 在 的 文件 夹 ,然后 
选中 要 导入 的 图 像 , 单 击 “ 打 开 ” 按 钮 ,鼠标 指针 即 变 成 一 个 左 直角 的 形状 ,这 时 拖 动 鼠标 就 
可 以 画 出 图 像 来 。 

如 果 画 好 的 图 像 大 小 不 满意 , 则 可 以 通过 “选择 ”工具 箱 中 的 “缩放 ”工具 杖 来 修改 。 
首先 选中 图 像 , 然 后 单 击 “ 缩 放 ” 工 具 ,图像 的 四 周 便 出 现 若干 个 黑色 的 小 方块 , 拖 动 这 些 方 
块 就 可 以 改变 图 像 的 大 小 。 

修改 图 像 大 小 时 ,如 果 按 住 Shift 键 的 同时 拖 动 图 像 右 下 角 的 小 方块 , 便 可 以 让 图 像 的 
宽度 和 高 度 按 设 定 的 比例 进行 改变 。 

5. 调整 对 象 的 位 置 

输入 了 文字 或 者 导入 了 图 像 之 后 ,如 果 需 要 调整 这 些 对 象 的 位 置 , 则 可 以 使 用 “选择 ” 工 
具 箱 中 的 第 一 个 工具 一 一 指针 ?工具 , 单 击 * 指 针 ? 工 具 , 就 可 以 拖 动 编辑 窗口 中 的 任何 对 
象 。 如 果 需 要 精确 定位 ,就 应 该 设置 属性 面板 上 的 X 值 和 Y 值 。 当 X 为 0 时 ,表示 对 象 的 
左 侧 与 画布 的 左 侧 对 齐 ; 当 Y 为 0 时 ,表示 对 象 的 顶端 和 画布 的 顶端 对 齐 。 对 象 往 右 移 ,X 
值 变 大 ; 往 下 移 ,Y 值 变 大 。 

6. 绘制 直线 

单 击 “ 矢 量 ” 工 具 箱 上 的 第 一 个 工具 一 一 “直线 ”工具 ,鼠标 指针 变 成 一 个 “十 ”的 形状 , 按 
住 鼠标 左 键 不 放 进 行 拖 动 ,就 可 以 画 出 一 条 直线 。 若 需要 画 一 条 完全 水 平 、 完 全 垂直 或 者 倾 
和 斜 45" 的 直线 ,只 须 在 拖 动 鼠 标的 同时 按 住 Shift 键 即 可 。 

画 出 直线 后 ,将 直线 选中 ,属性 面板 上 便 出 现 直 线 的 属性 。 可 以 通过 单 击 总 图 标 旁边 
的 按钮 ,打开 色 盘 ,从 而 设置 直线 的 颜色 ; 再 往 右边 是 一 个 数字 框 , 用 来 设置 直线 的 粗细 。 
“ 描 边 种 类 ”默认 是 “1 像素 ”, 单 击 该 框 ,可 以 选择 其 他 的 描 边 效果 ,但 是 必须 在 直线 的 粗细 
足够 大 的 情况 下 ,一 些 特殊 的 描 边 效果 才能 看 得 到 。 


第 2 章 个 人 网 站 需求 分 析 与 设计 (OI 


7. 绘制 矩形 

单 击 “ 矢 量 ? 工 具 箱 上 的 “矩形 ?工具 加 ,鼠标 指针 变 成 “十 ”的 形状 。 把 鼠标 指针 移 到 
画布 上 , 按 住 并 拖 动 , 即 可 画 出 矩形 ; 如 果 拖 动 的 同时 按 住 Shift 键 , 即 可 画 出 正方 形 。 

当 和 矩形 处 于 被 选中 的 状态 时 ,可 以 通过 属性 面板 来 修改 矩形 的 外 观 ,如 图 2-12 所 示 。 


Cre MAE | MBlm [Es 加 
[mB 33 J 边 综 :| 消 除 锯 太 ”S| 区 IGBID| is 活 镜 [+.| 一 


宽 |232 网 59 级 理 : [DNA 加 [o | 避风 棕 避 D pp ] 
a 三 一 上 一， 
a 透明 | 面 ]| 国度 :|0 vx。 


2-12 ”和 矩形 属性 面板 


(1) 修改 填充 色 

单 击 油漆 桶 图 标 网 右 侧 的 “颜色 ”按钮 ,打开 色 盘 ,修改 矩形 的 填充 色 。 填 充 类 别 .边缘 
和 纹理 的 设置 方法 与 文字 属性 类 似 。 

(2) 修改 边 的 颜色 

单 击 销 笔 图 标 曙 | 右 侧 的 “颜色 "按钮 ,打开 色 盘 ,修改 矩形 边 的 颜色 。 笔 尖 大 小 、 描 边 
种 类 边缘 和 纹理 的 设置 方法 与 直线 属性 类 似 。 

(3) 圆 度 

圆 度 用 来 设置 矩形 4 个 角 的 圆 度 ,默认 值 是 0, 当 值 变 大 时 ,矩形 的 4 个 角 将 逐渐 由 直 
角 变 成 圆 角 。 

8.“ 对 齐 "面板 

当 画 布 上 有 一 个 或 多 个 对 象 需要 对 齐 的 时 候 , 可 以 通过 “对齐 * 面 板 来 调整 。 

(1) 打开 “对 齐 ” 面 板 

选择 “窗口 "~“ 对 齐 "命令 , 即 可 打开 “对 齐 "面板 ,如 图 2-13 es xx ED 
所 示 。 相对 于 对 象 [所 

(2) 将 单个 对 象 居中 

将 单个 对 象 居中 ,是 指 让 对 象 在 画布 中 水 平 居中 或 者 垂直 宇 由 
居中 。 操 作 方法 : 首先 将 对 象 选中 ,然后 单 击 * 对 齐 "面板 上 的 。 exh: iE: 
“相对 于 对 象 "按钮 ,这 时 文字 切换 为 "相对 于 画布 ”; 接着 单 击 某 “ 皇 严 鱼 混和 
一 种 “对 齐 "方式 "水平 对 齐 "按钮 是 国 可 ,“ 垂 直 对 齐 "按钮 是 加 | 。 

(3) 将 多 个 对 象 对 齐 

有 时 候 需要 将 水 平方 向 上 多 个 的 对 象 垂直 对 齐 (如 图 2-14 
所 示 ) ,操作 方法 : 首先 将 多 个 对 象 选 中 ,然后 单 击 * 底 对 齐 "按钮 mm 。 有 时 候 需 要 将 垂直 方 
向 上 的 多 个 对 象 水 平 对 齐 (如 图 2-15 所 示 ) ,操作 方法 : 首先 将 多 个 对 象 选中 ,然后 单 击 * 左 
对 齐 "按钮 区 。 注意, 这 两 个 操作 都 不 需要 选中 "到 画布 "按钮 。 
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图 2-13 “对 齐 ” 面 板 


标题 1 标题 1 
标题 1 标题 》 标题 3 标题 4 标题 wp 标题 ? 

县 标题 3 标题 3 
标题 1 标题 》 标题 3 标题 4 标题 4 标题 4 


图 2-14 水 平 对 齐 示例 图 2-15 垂直 对 齐 示 例 
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(4) 设置 多 个 对 象 的 间距 

有 时 候 需要 将 多 个 对 象 的 垂直 距离 设置 为 相同 (如 图 2-16 所 示 ) ,操作 方法 : 首先 将 多 
个 对 象 选中 ,然后 单 击 * 垂 直 距 离 相同 ”按钮 洛 。 有 时 候 需要 将 多 个 对 象 的 水 平 距离 设置 为 
相同 (如 图 2-17 所 示 ) ,操作 方法 : 首先 将 多 个 对 象 选中 ,然后 单 击 “ 水 平 距离 相同 ”按钮 db 。 


标题 标题 ee 

标题 2 本 标题 2 标题 1 标题 2 标题 3 标题 4 

标题 3 标题 3 4 

标题 4 标题 4 标题 1 标题 2 标题 3 标题 4 
图 2-16 垂直 距离 相同 示例 图 2-17 水 平 距离 相同 示例 


2.2.4 设计 主页 界面 


根据 个 人 网 站 “爱心 屋 ” 的 需求 分 析 报告 ,进行 了 主页 界面 设计 。 主 页 界面 使 用 的 颜色 
守 合 需 求 分 析 报 告 的 要 求 : 以 绿色 和 白色 为 主 色调 ,具有 清新 淡雅 的 风格 ,页 面 字体 以 黑色 
为 主 ,效果 如 图 2-18 所 示 。 

该 设计 图 使 用 了 “文本 ”工具 “直线 ?工具 “和 矩形 工具 . 导 和 图像 和 "对齐 ?面板 。 


爱心 屋 


LOVEHOUSE ND 间 DR 四 受 pz 


爱心 美文 


版 权 所 有 o 爱 心 工作 室 
图 2-18 爱心 屋 主页 设计 图 


制作 步骤 如 下 。 

(1) 在 Fireworks 中 新 建 一 个 图 像 , 大 小 为 950X700 像素 。 
(2) 保存 图 像 , 输 入 文件 名 ,比如 “主页 界面 . png”。 

(3) 输入 “爱心 屋 " 和 “LOVEHOUSE”, 设 置 文字 的 属性 。 
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(4) 绘制 上 下 两 条 直线 ,设置 直线 的 属性 。 

(5) 在 第 一 条 直线 的 上 边 输入 “爱心 屋 主 ”“ 爱 心 美文 "“ 爱 心 风景 "“ 爱 心 之 声 ”, 设 置 
文字 的 属性 ,并 对 这 4 个 文本 块 设置 “ 底 对 齐 ” 和 “水 平 距离 相同 ”。 

(6) 在 4 个 标题 前 面 分 别 导 入 4 个 小 图 标 。 

(7) 在 第 二 条 直线 的 下 边 输 入 “版 权 所 有 爱心 工作 室 ”, 并 设置 文字 的 属性 。 

(8) 绘制 网 页 左 侧 的 矩形 ,设置 矩形 的 属性 。 

(9) 在 矩形 内 部 绘制 两 条 小 直线 ,并 设置 直线 的 属性 。 

(10) 在 和 矩形 内 部 输入 "爱心 屋 主 ”, 并 设置 文字 的 属性 。 

(11) 导入 “爱心 无 限 图 像 , 并 将 其 位 置 调整 到 矩形 的 左下 角 。 

(12) 绘制 网 页 右 侧 的 3 个 和 矩形 ,调整 矩形 的 位 置 ,并 设置 矩形 的 属性 。 

(13) 在 3 个 矩形 的 上 端 分 别 输入 “爱心 美文 "“ 爱 心 风景 "“ 爱 心 之 声 " 以 及 “more.…”， 
设置 文字 的 属性 。 

(14) 在 3 个 矩形 的 上 端 分 别 绘制 直线 ,并 设置 直线 的 属性 。 


2.2.5 设计 子 页 界面 


根据 个 人 网 站 “爱心 屋 ” 的 需求 分 析 报 告 ,对 其 中 的 一 个 子 页 “爱心 美文 "进行 界面 设 
计 。 子 页 界面 与 主页 风格 一 致 ,同样 以 绿色 和 白色 为 主 色调 ,清新 淡雅 ,效果 如 图 2-19 
所 示 。 

该 设计 图 同样 使 用 了 “文本 ”工具 “直线 "工具 “和 矩形 "工具 、 导 入 图 像 和 “对 齐 ” 面 板 。 


LOVEHOUSE 


溉 5 万 了 


版 权 所 有 o 爱 心 工 作 室 


2-19 爱心 屋子 页 设计 图 
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制作 步骤 如 下 。 

(1) 在 Fireworks 中 新 建 一 个 图 像 ,大 小 为 950X700 像素 。 

(2) 保存 图 像 ,输入 文件 名 ,比如 * 子 页 界面 . png”。 

(3) 输入 “爱心 屋 ” 和 “LOVEHOUSE” ,设置 文字 的 属性 。 

(4) 绘制 上 下 两 条 直线 ,设置 直线 的 属性 。 

(5) 在 第 二 条 直线 的 下 边 输 入 “版 权 所 有 爱心 工作 室 ”, 并 设置 文字 的 属性 。 

(6) 绘制 网 页 中 间 的 大 矩形 ,并 设置 矩形 的 属性 。 

(7) 在 矩形 内 部 的 左上 和 角 位 置 输入 子 页 标题 “爱心 美文 ,设置 文字 的 属性 。 

(8) 导入 一 个 小 图 标 , 并 将 其 位 置 调整 到 “爱心 美文 "前 。 

(9) 导入 一 个 修饰 图 像 ,并 将 其 位 置 调整 到 矩形 的 右上 角 。 

(10) 导 人 “爱心 无 限 ? 图 像 ,并 将 其 位 置 调整 到 矩形 的 左下 角 。 

注意 : 主页 界面 使 用 的 颜色 必须 符合 需求 分 析 报 告 的 要 求 : 页 面 风格 以 绿色 和 白色 为 
主 色调 ,要 求 具有 清新 淡雅 的 风格 ,页 面 字 体 以 黑色 为 主 。 


< 任务 2.2 
内 容 : 根据 任务 2. 1 中 的 需求 分 析 报 告 ,制作 个 人 网 站 的 主页 和 子 页 界面 设计 图 。 


网 页 制作 : 搭建 站 点 


本 章 将 介绍 网 站 目录 结构 的 搭建 以 及 将 界面 设计 图 转换 成 网 页 的 方法 。 此 外 ,从 本 章 
开始 将 陆续 介绍 HTML 的 相关 知识 ,本 章 的 内 容 是 HTML 的 基本 概念 和 HTML 代码 的 
基本 框架 结构 。 


本 章 学 习 要 点 : 

(1) 了 解 网 站 的 目录 结构 

(2) 了 解 HTML 代码 的 基本 结构 
(3) 掌握 Fireworks 中 的 切割 操作 
(4) 掌握 Fireworks 中 的 导出 操作 


3.1 在 计算 机 中 搭建 网 站 


确定 了 网 页 界面 设计 图 之 后 ,就 可 以 开始 制作 网 页 。 这 时 需要 考虑 一 个 问题 : 制作 出 
来 的 网 页 ,要 存放 在 硬盘 上 的 哪个 位 置 ? 

随便 找 个 文件 夹 存 放 或 者 直接 存放 在 某 个 分 区 下 面 ,这 样 不 可 以 吗 ? 不 可 以 。 因 为 一 
个 网 站 有 多 个 网 页 文件 ,如 果 把 它们 散乱 地 存放 在 硬盘 上 ,这 样 不 利于 文件 的 管理 。 就 像 一 
个 人 有 多 件 衣 服 , 如 果 乱 扔 在 不 同 的 地 方 , 需 要 的 时 候 就 不 容易 找到 ,所 以 需要 把 它们 集中 
存放 ,比如 放 在 一 个 箱子 里 。 同 样 的 道理 ,应 该 把 同一 个 网 站 中 的 所 有 网 页 集中 存放 到 一 个 
文件 夹 中 ,便于 管理 。 

所 以 ,在 硬盘 上 ,每 一 个 网 站 都 需要 创建 一 个 文件 夹 ,将 该 文件 夹 称 为 “网 站 的 根 目录 ”。 
一 个 网 站 只 需要 一 个 根 目 录 , 一 个 根 目录 也 只 能 存放 一 个 网 站 。 

由 于 一 个 网 站 不 仅 有 网 页 文件 ,还 会 有 图 像 文 件 , 所 以 在 每 个 网 站 根 目 录 中 ,需要 再 创 
建 若 干 个 子 文件 夹 ,用 来 存放 不 同类 型 的 文件 。 例 如 图 1-1 所 示 , 个 人 网 站 “流星 站 ”在 硬盘 
中 有 一 个 根 目录 , 目 录 名 为 “流星 站 ”, 在 该 目录 下 面 又 创建 3 个 子 文件 夹 ,分 别 是 “多 媒体 文 
件 ”“ 图 像 文 件 ” 和 “网 页 文件 ”, 用 来 存放 网 站 中 不 同类 型 的 文件 。 

【案例 演示 3-1】 为 个 人 网 站 “爱心 屋 ” 在 计算 机 中 搭建 网 站 根 目 录 , 要 求 搭建 在 盘 。 

(1) 双击 桌面 上 的 “我 的 电脑 ”, 再 双击 下 盘 , 进 入 其 中 。 

(2) 在 玉 盘 下 空白 处 右 击 ,在 弹出 菜单 中 选择 新建" 中 的 “文件 夹 "菜单 项 , 右 击 新 建 的 
文件 夹 , 在 弹出 菜单 中 选择 “ 重 命名 ”菜单 项 ,输入 “爱心 屋 ”, 这 样 就 创建 了 爱心 屋 网 站 的 根 
目录 。 

(3) 双击 “爱心 屋 "文件 夹 , 进 入 其 中 ,在 空白 处 右 击 ,在 弹出 菜单 中 选择 新建" 中 的 ” 文 
件 夹 " 菜 单项 , 右 击 新 建 的 文件 夹 , 在 弹出 菜单 中 选择 “ 重 命名 ”命令 ,输入 tuxiang, 这 样 就 
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创建 了 第 一 个 子 文件 夹 ,用 来 存放 网 站 中 的 所 有 图 像 文 件 。 
(4) 通过 同样 的 方式 再 创建 一 个 子 文件 夹 , 命 名 为 wangye, 用 来 存放 网 站 中 的 所 有 网 
页 文件 。 这 样 ,爱心 屋 网 站 在 计算 机 中 就 “安家 落户 ”了 。 


< 任务 3.1 


内 容 : 为 所 负责 的 个 人 网 站 在 计算 机 中 创建 根 目 录 , 并 在 根 目录 下 创建 两 个 子 文件 夹 ， 
分 别 命名 为 wangye 和 tuxiang。 


3.2 导出 网 页 


在 计算 机 中 搭建 了 网 站 的 目录 结构 之 后 ,就 可 以 开始 创建 网 页 。 这 时 需要 用 到 之 前 设 
计 好 的 网 页 界面 设计 图 ,通过 对 设计 图 进行 切割 和 导出 ,创建 一 个 “空白 ”的 网 页 。“ 空 白 ” 并 
不 是 说 网 页 像 白 纸 一 样 ,确切 地 说 ,是 像 一 张 空白 的 明信片 一 样 ,还 没有 添加 网 页 上 要 展示 
的 相关 信息 。 


3.2.1 切割 界面 设计 图 


在 Fireworks 中 做 好 网 页 界面 设计 图 之 后 ,需要 对 整 张 图 进行 切割 ,把 它 分 割 成 若干 个 
小 图 之 后 再 导出 生成 一 个 网 页 。 而 导出 生成 的 网 页 , 正 是 由 切割 得 到 的 若干 个 小 图 组 成 。 
这 就 像 玩 拼图 游戏 ,拼图 上 的 每 个 小 块 是 从 一 张 完整 的 大 图 上 分 割 出 来 的 ,再 用 一 个 框架 把 
这 些小 块 无 颖 地 拼凑 起 来 ,得 到 和 原来 的 大 图 一 模 一 样 的 外 观 。 

为 什么 要 切割 呢 ? 主要 的 原因 有 两 个 。 

一 是 为 了 节约 使 用 浏览 器 打开 网 页 所 花费 的 时 间 。 如 果 在 网 页 上 的 图 片 比 较 大 ,浏览 
器 打开 网 页 时 需要 下 载 整 个 图 片 ,花费 的 时 间 比 较 长 。 如 要 把 一 个 大 图 变 成 若干 个 小 图 , 浏 
览 器 打开 网 页 时 ,需要 做 的 是 分 开 下 载 多 个 不 同 的 小 图 片 ,这 样 相 对 而 言 会 节约 不 少时 间 ， 
也 减少 了 等 待 网 页 打开 的 时 间 。 

二 是 为 了 在 设计 图 上 划分 出 不 同 功能 的 若干 个 区 域 。 因 为 在 一 个 网 页 的 界面 上 ,有 的 
地 方 用 来 显示 标题 ,有 的 地 方 用 来 显示 某 个 栏目 的 最 新 信息 ,有 的 地 方 用 来 显示 广告 等 。 也 
就 是 说 ,界面 设计 图 需要 划分 出 多 个 区 域 ,以 便 在 制作 网 页 的 时 候 对 它们 进行 不 同 的 处 理 ， 
比如 添加 不 同 的 文字 内 容 。 

所 以 ,每 个 网 页 的 设计 图 被 导出 生成 对 应 的 网 页 之 前 ,一 般 都 需要 进行 切割 。 

1. 如 何 切割 图 像 

在 Fireworks 中 ,切割 图 像 的 工具 叫做 “切片 ”, 它 在 图 像 编 辑 窗口 左 侧 的 Web 工具 箱 
中 。 下 面 以 第 2 章 中 完成 的 “爱心 屋 ” 主 页 界面 设计 图 为 例 ,讲解 如 何 使 用 切片 工具 切割 
图 像 。 

首先 ,运行 Fireworks 软件 ,选择 “文件 ”>“ 打 开 ” 命 令 , 在 “查找 范围 ”中 定位 到 主页 设 
计 图 所 在 的 目录 下 ,选择 主页 设计 图 ,双击 打开 图 像 。 

然后 , 单 击 Web 工具 箱 中 的 “切片 ”工具 也 ,此 时 鼠标 将 变 成 “十 ”的 形状 , 按 住 鼠 标 左 
键 并 拖 动 ,就 可 以 画 出 一 个 淡 绿 色 的 切片 。 按 照 这 样 的 操作 方式 ,在 设计 图 上 画 出 若干 个 切 
片 ,如 图 3-1 所 示 。 
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如 果 画 出 的 切片 需要 调整 或 者 删除 ,怎么 做 呢 ? 

调整 切片 大 小 有 两 种 方法 。 第 一 种 方法 是 , 单 击 * 选 择 ? 工 具 箱 中 的 “指针 ?工具 由 , 然 
后 把 光标 移 到 切片 的 边界 上 , 按 住 左 键 并 拖 动 , 即 可 改变 切片 大 小 。 第 二 种 方法 是 ,同样 使 
用 ”指针 ?工具 , 单 击 切片 ,这 时 切片 的 边 会 由 红色 变 为 蓝 色 ,表示 切片 被 选中 ,然后 修改 属性 
面板 左边 的 “ 宽 " 值 和 “高 " 值 , 可 以 更 精确 地 修改 切片 的 大 小 。 

删除 切片 也 需要 单 击 “ 指 针 ” 工 具 ,然后 单 击 设计 图 上 需要 删除 的 切片 ,再 按 Delete 键 ， 
即 可 删除 。 

最 后 ,所 有 切片 都 画 好 后 要 保存 设计 图 ,这 样 下 次 再 打开 这 张 图 片 ,才能 够 看 到 切片 。 

2. 切割 图 像 的 原则 

在 切割 图 像 的 时 候 应 该 把 握 一 定 的 原则 ,这样 才能 确保 生成 的 网 页 布局 能 够 满足 网 页 
制作 过 程 中 的 种 种 需求 。 

切割 图 像 的 基本 原则 之 一 是 : 在 每 一 个 标题 和 每 一 个 需要 添加 文字 的 区 域 上 ,都 画 上 
切片 ,而 且 需 要 添加 文字 的 区 域 ,要 记得 切片 不 要 画 得 太 满 ,应 该 留 出 边 距 。 比 如 图 3-1 中 ， 
左 侧 * 爱 心 屋 主 ? 这 个 矩形 框 内 ,在 制作 网 页 的 时 候 将 添加 文字 内 容 , 所 以 在 和 矩形 的 内 部 画 了 
一 个 较 大 的 切片 ,表示 这 个 区 域 将 被 切割 出 来 ; 但 是 它 与 矩形 的 边 是 留 有 距离 的 ,因为 为 了 
美观 ,添加 文字 的 时 候 文字 的 四 周 应 该 有 一 定 的 边 距 。 

切割 图 像 的 基本 原则 之 二 是 : 当 切 割 出 来 的 区 域 在 制作 网 页 的 过 程 中 ,高 度 被 撑 大 了 
之 后 ,应 该 保证 区 域 左右 两 侧 的 图 像 不 变形 。 比 如 在 切割 “爱心 屋 ” 的 子 页 设计 图 时 ,由 于 切 
割 不 当 ( 如 图 3-2 所 示 ), 当 制作 网 页 的 过 程 中 中 心 区 域 被 撑 大 时 ,左右 两 侧 单元 格 也 随 之 变 
大 ,所 以 图 像 之 间 出 现 了 缝隙 ,导致 整个 界面 变形 (如 图 3-3 所 示 ) 。 
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图 3-3 变形 了 的 子 页 界面 


为 了 解决 这 个 问题 ,在 切割 一 个 添加 文字 的 区 域 时 ,最 好 把 它 左右 同 等 高 度 的 范围 也 切 
割 出 来 (如 图 3-4 所 示 ) ,并 且 左 右 这 两 个 区 域 切割 出 来 的 图 像 应 该 具有 一 个 特点 , 即 作为 背 
景 填充 时 ,图 像 重 复 显示 的 效果 ,就 像 是 图 像 被 放大 。 

比如 图 3-5 中 , 左 侧 的 图 是 显示 一 次 的 效果 , 右 侧 的 图 是 重复 显示 的 效果 ,两 种 效果 不 
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图 3-4 正确 切割 的 子 页 


相同 ; 而 图 3-6 中 , 左 侧 的 图 是 显示 一 次 的 效果 , 右 侧 的 图 是 重复 显示 的 效果 , 右 图 就 像 是 
把 左 图 放大 了 一 样 。 


Ea 
爱心 区. 于 县 心志 .于 
图 3-5 图 像 重 复 显示 效果 1 3-6 图 像 重 复 显 示 效 果 2 


如 果 符 合 上 述 的 图 像 特 点 ,在 制作 网 页 的 时 候 ,将 左右 两 侧 区 域 的 图 像 当 作 背景 进行 填 
充 ( 如 图 3-7 所 示 ) ,就 可 以 解决 变形 的 问题 。 

如 果 原 则 二 不 能 被 保证 (比如 “爱心 屋 ” 的 主页 设计 图 ) ,那么 在 制作 网 页 时 就 要 避免 添 
加 内 容 的 大 小 超过 所 在 区 域 的 高 度 。 

3. 隐藏 切片 

在 对 网 页 界面 设计 图 进行 切割 的 过 程 中 ,有 时 图 像 上 有 一 些 细节 需要 调整 ,所 以 就 想 暂 
停 切割 的 操作 , 转 而 修改 一 下 图 像 。 这 时 ,那些 切片 就 显得 有 些 碍 眼 ,因为 它们 挡住 了 图 像 ， 
所 以 需要 把 它们 隐藏 起 来 。Fireworks 提供 了 隐藏 切片 的 工具 按钮 ,叫做 “隐藏 切片 和 热 
点 ”, 它 属于 图 像 编 辑 窗 口 左 侧 的 Web 工具 箱 。 单 击 “ 隐 藏 切片 和 热点 ”按钮 国 ,之 前 画 好 
的 切片 就 都 “消失 ”了 。 注 意 , 这 个 操作 只 是 让 切片 隐藏 起 来 而 已 ,并 不 是 删除 它们 , 当 再 单 
击 Web 工具 箱 上 的 “显示 切片 和 热点 ”按钮 图 时 .所 有 的 切片 又 都 可 见 了 。 
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图 3-7 不 会 发 生 形变 的 子 页 


3.2.2 导出 网 页 


对 网 页 界面 设计 图 进行 了 切割 之 后 ,就 可 以 准备 导出 网 页 。 因 为 导出 的 网 页 上 将 显示 
若干 张 小 图 像 ,这 些 图 像 的 格式 或 大 小 会 影响 网 页 打开 的 速度 ,所 以 在 导出 之 前 ,还 需要 对 
图 像 进 行 一 些 设置 。 本 节 先 介绍 一 些 常见 的 图 像 格式 以 及 Fireworks 中 的 图 像 预览 ,然后 
再 介绍 如 何 导出 网 页 。 

1. 图 像 格式 

图 像 文件 的 格式 有 很 多 种 ,常见 的 有 BMP GIF JPEG、PSD、PNG 等 ,其 中 PNG 格式 
在 第 2 章 曾 经 接触 过 ,就 是 Fireworks 软件 创建 的 图 像 格式 。 下 面 了 解 一 下 不 同 格式 的 图 
像 有 什么 区 别 。 

(1) BMP 格式 

BMP 格式 文件 扩展 名 是 . bmp, 它 是 Windows 中 的 一 种 标准 ,因此 在 Windows 环境 中 
运行 的 图 形 图 像 软件 都 支持 这 种 图 像 格 式 。BMP 格式 的 图 像 使 用 非常 广泛 ,但 由 于 这 种 格 
式 的 图 像 包含 的 图 像 信息 几乎 没有 被 压缩 ,所 以 对 应 的 图 像 文件 所 占用 的 磁盘 存储 空间 
很 大 。 

(2) GIF 格式 

GIF 格式 文件 扩展 名 是 . gif, 目 前 几乎 所 有 图 像 软 件 都 支持 这 种 格式 ,有 大 量 的 软件 在 
使 用 GIF 图 像 文件 。 这 种 格式 的 图 像 是 经 过 信息 压缩 的 ,占用 的 磁盘 存储 空间 较 小 ,所 以 
打开 的 速度 也 比较 快 ; 另外 它 还 有 一 个 优点 ,就 是 支持 动画 形式 和 透明 背景 。 但 是 , 正 因为 
GIF 格式 是 经 过 信息 压缩 的 ,所 以 可 能 导致 图 像 的 显示 效果 不 够 理想 ,出 现 颜色 失真 等 
问题 。 

(3) JPEG 格式 

JPEG 格式 是 目前 网 络 上 最 流行 的 图 像 格 式 , 其 文件 扩展 名 有 两 种 : . jpg 和 . jpeg。 这 
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种 格式 的 图 像 文件 也 是 经 过 信息 压缩 的 ,因此 储存 空间 也 较 小 ,而 且 由 于 采用 了 比较 高 
级 的 压缩 技术 ,所 以 图 像 的 色彩 信息 保留 较 好 。 换 名 话说 ,就 是 可 以 用 最 少 的 磁盘 空间 
得 到 较 好 的 图 像 品 质 。JPEG 格式 适合 应 用 于 互联 网 ,可 减少 图 像 的 传输 时 间 、 下 载 速 
度 快 。 

(4) PSD 格式 

PSD 是 Photoshop 图 像 处 理 软件 的 专用 文件 格式 ,文件 扩展 名 是 . psd, 可 以 支持 图 层 、 
通道 . 蒙 版 和 不 同色 彩 模 式 的 各 种 图 像 特 征 。PSD 是 一 种 没有 经 过 信息 压缩 的 原始 文件 保 
存 格式 ,所 以 图 像 文件 有 时 会 占用 很 大 的 存储 空间 ; 但 由 于 可 以 保留 所 有 原始 信息 ,所 以 将 
图 像 保 存 为 PSD 格式 就 能 够 在 Photoshop 中 对 其 继续 编辑 或 随时 修改 。 

(5) PNG 格式 

PNG 是 Fireworks 图 像 处 理 软件 使 用 的 文件 格式 ,文件 扩展 名 是 . png, 它 也 支持 图 层 、 
通道 、 蒙 版 和 不 同色 彩 模 式 的 各 种 图 像 特征 ,所 以 将 图 像 保 存 为 这 种 格式 就 能 够 在 
Fireworks 中 对 其 继续 编辑 或 随时 修改 。Photoshop 同样 可 以 处 理 PNG 图 像 文 件 。 

在 制作 网 页 的 软件 中 ,对 BMP 格式 的 支持 较 弱 ,所 以 BMP 格式 的 图 像 在 网 页 中 常常 
不 能 显示 。 考 虑 到 网 页 的 打开 速度 ,常常 选择 在 网 页 上 使 用 GIF 或 者 JPEG 格式 的 图 像 。 

2. 图 像 预览 

图 像 预览 能 够 帮助 设置 好 导出 图 像 的 格式 和 大 小 ,操作 步骤 如 下 。 

(1) 选择 “文件 ”一 图像 预览 ”命令 ,打开 图 3-8 所 示 的 设置 窗口 。 单 击 “ 选 项 ”选项 卡 
中 的 “格式 ” 栏 ,在 弹出 菜单 中 选择 需要 的 格式 ,一 般 是 GIF 或 者 JPEG, 其 他 选项 保持 默认 
的 设置 就 可 以 。 

(2) 在 “图 像 预览 ”对 话 框 右边 查看 图 像 的 显示 效果 ,如 果 效 果 不 满意 ,可 以 调整 GIF 格 
式 下 的 “ 调 色 板 ?或 者 调整 JPEG 格式 下 的 “品质 ”, 直 到 图 像 的 显示 效果 比较 满意 为 止 。 

(3) 单 击 “ 确 定 ” 按 钮 即 可 。 

图 像 预览 的 时 候 , 经 常 需要 在 图 像 占 用 空间 大 小 和 显示 效果 之 间 进 行 权衡 。 在 图 3-8 
所 示 的 “图 像 预览 ”对 话 框 的 右 侧 ,上 端 出 现 的 "28. 33K” 和 “4 秒 ” 代 表 的 是 图 像 占用 存储 空 
间 的 大 小 以 及 图 像 在 网 络 中 下 载 所 需要 的 时 间 ,“56kbps” 是 假设 的 网 络 速 度 ; 下 面 则 是 图 
像 效 果 的 预览 窗口 ,通过 鼠标 拖 动 可 以 查看 整个 图 像 的 效果 。 在 进行 设置 的 时 候 , 不 能 一 味 
追求 图 像 效 果 ,还 应 该 注意 图 像 空间 大 小 ,如 果 能 在 两 者 之 间 找 到 一 个 最 佳 点 那 是 最 好 的 ， 
否则 就 只 能 牺牲 显示 效果 或 者 图 像 的 下 载 速 度 。 

3. 导出 网 页 

设置 好 图 像 的 导出 格式 之 后 ,开始 导出 网 页 。 选 择 * 文 件 ”>“ 导 出 ”命令 ,出 现 “ 导 出 ”对 
话 框 (如 图 3-9 所 示 )。“ 导 出 ”对 话 框 的 设置 操作 如 下 。 

(1) 分 别 单 击 “ 导 出 ” 栏 . HTML 栏 和 “切片 ” 栏 ,依次 选择 “HTML 和 图 像 *“ 导 出 
HTML” 和 “导出 切片 ”( 如 果 设 计 图 上 有 切片 ,默认 设置 和 上 述 选择 是 一 样 的 )。 

(2) 单 击 “ 保 存在 " 栏 ,选择 网 页 要 保存 的 位 置 ,并 在 “文件 名 ” 栏 输 入 网 页 的 名 字 , 比 如 
导出 “爱心 屋 ” 的 主页 时 输入 index. htm。 

(3) 选择 “包括 无 切片 区 域 " 以 及 “将 图 像 放 和 信子 文件 夹 " 复 选 框 , 单 击 “ 浏 览 ” 按 钮 ,选择 
网 站 根 目 录 下 用 来 存放 图 像 的 子 文件 夹 ,比如 “爱心 屋 ” 目 录 下 的 tuxiang 文件 夹 , 双 击 进 
和 人 ,再 单 击 “ 打 开 ” 按 钮 ,就 设置 了 切割 后 的 图 像 的 保存 位 置 。 
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(4) 单 击 “ 导 出 ”按钮 ,就 完成 了 网 页 的 导出 。 

导出 之 后 ,打开 计算 机 硬盘 中 的 网 站 根 目录 ,再 打开 子 文件 夹 ,分 别 可 以 看 到 导出 的 若 
干 张 小 图 像 和 网 页 。 这 时 的 网 页 就 像 一 张 空白 的 明信片 ,是 未 添加 信息 的 ,在 第 4 章 中 ,将 
对 它 进行 进一步 的 制作 。 


< 任务 3.2 


内 容 : 在 Fireworks 中 打开 之 前 制作 的 个 人 网 站 主页 设计 图 和 子 页 设计 图 ,分 别 进行 
切割 .图 像 预览 ,并 导出 网 页 。 

要 求 ， 

(1) 主页 文件 名 为 index. htm , 子 页 文件 名 为 subpage. htm 。 

(2) 这 两 个 网 页 都 存放 在 个 人 网 站 根 目录 的 wangye 文件 夹 中 。 

(3) 导出 的 图 像 存放 在 个 人 网 站 根 目录 的 tuxiang 文件 夹 中 。 


3.3 关于 HTML: 初 识 HTML 


3.3.1 HTML 


HTML(Hypertext Markup Language, 超 文本 置 标语 言 ) ,由 国际 W3C 组 织 ( 万 维 网 联 
盟 ,为 网 站 的 发 展 制定 标准 的 国际 组 织 ) 制 定 , 已 经 从 1.0 版 本 发 展 到 5.0 版 本 。HTML 是 
制作 网 页 所 使 用 的 一 种 语言 ,由 一 套 标 签 组 成 。 

在 第 1 章 讲 过 ,网 页 是 由 代码 组 成 的 ,而 静态 网 页 基本 上 就 是 由 HTML 编写 的 代码 组 
成 。 把 由 HTML 编写 的 代码 叫做 “HTML 代码 ”。 以 记事 本 的 方式 打开 一 个 网 页 ,就 可 以 
看 到 这 个 网 页 对 应 的 HTML 代码 。 比 如 ,查看 “爱心 屋 ” 主 页 的 代码 : 右 击 index. htm, 在 
弹出 菜单 中 选择 “打开 方式 ”记事 本 ”命令 ,就 可 以 看 到 该 页 对 应 的 HTML 代码 。 

HTML 使 用 标签 来 标记 网 页 中 要 显示 的 各 个 部 分 ,比如 使 用 过 html 之 标签 标记 
HTML 代码 的 开始 ,使 用 过 body 之 标签 标记 网 页 主体 的 开始 ,使 用 和 img 之 标签 标记 一 个 
图 像 , 使 用 二 table 二 标签 标记 一 个 表格 的 开始 等 。 标 签 的 作用 在 于 告诉 浏览 器 如 何 显示 这 
些 内 容 , 如 文字 如 何 处 理 画面 如 何 安排 .图 像 如 何 显示 等 。 

HTML 有 一 定 的 语法 规则 。 比 如 , 王 html> 应 该 写 在 王 body 过 前面, 二 table> 标 签 是 
成 对 出 现 的 ,而 二 img 二 标签 只 是 单独 的 一 个 。 编 写 网 页 的 HTML 代码 ,必须 按照 语法 要 
求 来 写 。 当 浏览 器 接收 到 网 页 的 HTML 代码 时 ,会 按 顺 序 阅读 、 翻 译 并 显示 相关 的 内 容 ， 
如 果 代 码 出 现 语 法 错误 ,浏览 器 就 可 能 “看 不 私 ”, 无 法 解释 ,从 而 导致 网 页 不 能 正常 显示 。 
就 像 人 类 使 用 的 语言 一 样 , 如 果 说 话 时 没有 按照 语法 要 求 , 可 能 别人 就 会 听 不 懂 。 


3.3.2 HTML 标签 
前 面 讲 过 ,HTML 使 用 不 同 的 标签 来 标记 网 页 中 不 同 的 内 容 , 本 书 统称 为 “HTML 标 
签 ”, 有 些 书 里 也 称 为 “HTML 标记 符号 ”。 


HTML 标签 一 般 放 在 一 对 尖 括 号 *< 之 ”中 ,并 使 用 相应 的 英文 单词 或 其 简写 的 形式 
来 表示 标签 的 作用 ,所 以 HTML 标签 的 写法 一 般 是 : 一 单词 或 其 简写 二 >。 比 如 过 table 二 中 
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的 table 是 “表格 "的 意思 ,一 img 二 中 的 img 为 image 的 简写 是 “图 像 * 的 意思 。 
HTML 标签 分 为 两 种 : 成 对 标签 和 独立 标签 。 
成 对 标签 的 特点 是 有 开始 和 结束 两 个 标签 ,结束 标签 和 开始 标签 的 区 别 是 在 单词 前 面 
多 了 一 个 “/”。 比 如 表格 就 是 使 用 成 对 标签 , 它 的 开始 标签 是 二 table 之 ,结束 标签 是 
=/table> 。 
独立 标签 的 特点 就 是 只 有 一 个 标签 。 比 如 图 像 标签 天 img 之 就 是 独立 标签 。 
有 时 可 能 会 忘记 输入 成 对 标签 的 结束 符号 ,比如 表格 的 二 /table 之 被 漏 掉 , 这 样 的 疏忽 
可 能 会 导致 网 页 显示 不 正常 ,所 以 务必 小 心 。 
常见 的 HTML 标签 及 其 作用 列举 如 下 ,在 此 仅 供 初步 了 解 ,其 中 涉及 的 专业 概念 以 及 
每 个 常用 标签 的 详细 用 途 , 将 在 后 面 的 章节 陆续 介绍 。 
(1) 二 html> 二 /html> 表示 HTML 代码 的 开始 和 结束 。 
(2) 二 head> 所 /head> 表示 网 页 头 的 开始 和 结束 。 
(3) 二 meta 二 /meta> 表示 HTML 代码 中 响应 头 报 文 的 开始 和 结束 。 
(4) <title> 过 /title>> 用 来 设置 网 页 标题 。 
(5) 二 body> 二/body> 表示 网 页 主体 的 开始 和 结束 。 
(6) 一 table> 到 /table> 表示 表格 的 开始 和 结束 。 
(7) 二 tr> 之 /tr 之 表示 表格 中 一 行 的 开始 和 结束 。 
(8) 二 td 二 二 /td 二 表示 表格 中 一 个 单元 格 的 开始 和 结束 。 
(9) 一 img> 表示 一 个 图 像 。 
0) 二 p 所 /p> 表示 一 个 段落 的 开始 和 结束 。 
1) 二 br 二 表示 换行 。 
12) 过 ul> 去 /ul> 表示 无 序列 表 的 开始 和 结束 。 
3) 一 ol> 去 /ol> 表示 有 序列 表 的 开始 和 结束 。 
4) <li> 反省 > 表示 一 个 列表 项 的 开始 和 结束 。 
5) 二 a> 二 /a 二 表示 超 链接 的 开始 和 结束 。 
6) 二 style 之 所 /style> 表示 样式 定义 的 开始 和 结束 。 
7) 二 frameset 所/frameset> 表示 一 个 框架 集 的 开始 和 结束 。 
8) 二 frame 之 二 /frame 之 表示 一 个 框架 的 开始 和 结束 。 
9) 到 iframe> 所 /iframe> 表示 一 个 内 联 框 架 的 开始 和 结束 。 
(20) 二 div 记 二 /div> 表示 一 个 层 的 开始 和 结束 。 
(21) 一 script> 所/script> 表示 一 个 脚本 的 开始 和 结束 。 
(22) <bgsound> 用 于 设置 网 页 的 背景 音乐 。 
(23) 二 form 记 二 /form> 表示 一 个 表单 的 开始 和 结束 。 
(24) 一 label> 所 /label> 表示 一 个 标签 的 开始 和 结束 。 
(25) 近 input> 表示 一 个 输入 框 、 选 框 或 按钮 。 
(26) 到 textarea> 过 /textarea> 表示 一 个 文本 区 域 的 开始 和 结束 。 
(27) 一 select> 所 /select> 表示 一 个 菜单 或 列表 的 开始 和 结束 。 
(28) 二 option 之 所/option> 表示 一 个 菜单 或 列表 选项 的 开始 和 结束 。 


a i i ,i i i 
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3.3.3 HTML 代码 的 基本 框架 


在 HTML 的 语法 中 ,规定 了 代码 的 基本 框架 (如 图 3-10 所 示 ) ,要 求 如 下 。 


(1) HTML 代码 由 二 html 之 标签 开始 ， 二 


二 /html 放 标签 结束 。 <head> 一 一 网 页 头 
(2) 整个 HTML 代码 包含 了 网 页 头 和 网 页 me > 
主体 两 大 部 分 ,网 页 头 使 用 二 head 之 和 到 /head <boby> 一 网 页 主体 
表示 开始 和 结束 ,网 页 主体 使 用 一 body > 和 Se 
二 /body 二 表示 开始 和 结束 。 -mv 一 一 


(3) 在 网 页 头 中 ,包含 一 对 过 title 之 和 
二 /title 二 标签 ,用 来 设 定 网 页 标题 (浏览 网 页 的 
时 候 , 网 页 标题 显示 在 浏览 器 顶部 的 蓝 色 标 题 栏 上 ) ,网 页 标题 部 分 是 可 选 的 。 

(4) 网 页 上 要 显示 的 内 容 添加 在 二 body 之 和 所 /body 二 之 间 , 比 如 表格 、 图 像 . 文 字 等 ; 
其 他 的 内 容 一 般 添加 在 二 head 二 和 二 /head 二 之 间 , 比 如 网 页 的 编码 设置 .关键 字 、 
JavaScript 脚本 等 。 

(5) HTML 标签 之 间 是 嵌 套 使 用 的 ,比如 二 html> 二 head> 二 /head> 二 /html> ,如 
果 写 成 一 html> 二 head> 二 /html> 二 /head 之 是 不 规范 的 。 


3.3.4 HTML 代码 编写 工具 


编写 HTML 代码 ,可 以 使 用 记事 本 、Dreamweaver、FrontPage、EditPlus、HomeSite 等 
工具 软件 , 现 对 这 些 软 件 进 行 简单 的 介绍 。 

1. 记事 本 

记事 本 在 Windows 操作 系统 中 是 一 个 简单 的 文本 编辑 器 。 

单 击 Windows 操作 系统 桌面 左下 角 的 “开始 ”按钮 ,选择 所 有 程序 ”>“ 附 件 ”>“ 记 事 
本 ”命令 , 即 可 打开 。 也 可 以 单 击 “ 开 始 ” 按 钮 之 后 ,选择 “运行 "命令 ,输入 notepad, 然 后 单 
击 “ 确 定 ” 按 钮 ,同样 能 够 打开 记事 本 工具 。 

记事 本 工具 是 最 简单 的 HTML 代码 编写 工具 , 除 此 之 外 , 它 还 可 以 编写 其 他 类 型 的 代 
码 或 文档 ,可 以 说 是 用 途 广泛 的 一 款 工具 。 记 事 本 的 使 用 简易 ,是 因为 它 提供 的 功能 很 简 
单 ,所 以 使 用 它 编写 HTML 代码 也 有 不 方便 的 地 方 。 比 如 每 一 行 代码 每 一 个 标签 都 要 手 
动 输入 ,无 法 对 语法 错误 做 出 判读 和 提示 ,并 且 在 编写 HTML 代码 的 过 程 中 不 能 同时 见 到 
网 页 的 浏览 效果 等 。 所 以 使 用 记事 本 编写 HTML 代码 ,并 不 是 一 个 很 好 的 选择 。 

2. Dreamweaver 

Dreamweaver 原本 是 Macromedia 公司 开发 的 著名 的 网 站 开发 工具 , 随 着 Macromedia 
被 Adobe 公司 收购 ,Dreamweaver 也 就 成 了 Adobe 公司 旗下 的 一 款 产品 。Dreamweaver 在 
HTML 代码 编写 方面 具有 智能 提示 、 语 法 判断 、 预 览 网 页 效果 等 功能 , 它 是 目前 市 场 上 流行 
的 网 页 制作 工具 之 一 ,也 是 本 书 在 讲述 网 页 制作 时 所 使 用 的 工具 软件 。Dreamweaver 的 功 
能 将 在 后 面 的 章节 介绍 。 

3. FrontPage 

FrontPage 是 微软 公司 出 品 的 一 款 网 页 制作 工具 ,使 用 简单 ,并 且 也 提供 了 “所 见 即 所 
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得 ”( 即 编写 HTML 代码 时 能 够 同时 见 到 网 页 效果 ) 的 功能 ,适合 网 页 制作 的 初学 者 ,曾经 
是 市 场 上 流行 的 一 款 软件 。 但 是 由 于 微软 公司 宣布 在 2006 年 年 底 前 停止 提供 FrontPage 
软件 ,该 软件 可 能 将 慢 慢 退 出 历史 舞台 。 

4. EditPlus 

EditPlus 是 韩国 人 开发 的 一 款 共享 软件 (也 就 是 可 以 免费 使 用 ) ,虽然 小 巧 但 功能 强大 ， 
可 用 于 编写 HTML 代码 。EditPlus 界面 简洁 ,启动 速度 快 ,适合 初学 者 使 用 ,但 是 EditPlus 
的 代码 自动 完成 功能 较 弱 ,并 且 不 支持 代码 提示 。 由 于 个 人 习惯 的 不 同 ,对 EditPlus 的 评 
价 也 不 一 致 ,但 是 在 一 定 程度 上 ,EditPlus 仍然 是 一 款 不 错 的 网 页 编辑 工具 。 

5. HomeSite 

HomeSite 是 由 Adobe 公司 提供 的 是 一 种 功能 完备 的 HTML 代码 编写 工具 。 它 与 记 
事 本 工具 类 似 , 但 含有 自动 添加 HTML 标签 以 及 轻松 创建 HTML 复杂 元 素 的 功能 。 由 于 
种 种 原因 ,HomeSite 还 未 成 为 目前 市 场 的 主流 软件 。 


3.3.5 HIML 和 XHTML 


XHTML(eXtensible HyperText Markup Language, 可 扩展 超 文本 置 标语 言 ) 也 是 由 国 
际 W3C 组 织 制定 的 ,目前 发 展 到 2. 0 版 本 。 

XHTML 和 HTML 有 什么 关联 和 不 同 吗 ? 为 什么 有 HTML, 还 会 有 XHTML 呢 ? 这 
得 从 XML 说 起 。 

当前 市 场 上 ,有 一 种 叫做 XML 的 标记 语言 日 渐 兴 起 ,从 作用 上 来 说 , 它 完 全 可 以 取代 
HTML, 并 且 功 能 更 加 强大 。 但 是 由 于 有 成 千 上 万 的 旧 网 站 使 用 的 是 HTML, 所 以 若 据 弃 
HTML, 直接 采 用 XML, 在 目前 的 形势 下 是 不 现实 的 。 为 了 实现 从 HTML 向 XML 过 渡 ， 
国际 W3C 组 织 开 发 了 XHTML。XHTML 集合 了 HTML 和 XML 的 特点 ,是 一 个 过 渡 时 
期 的 产物 。 

相对 HTML 而 言 ,XHTML 在 语法 会 更 严格 一 些 , 下 面 从 几 个 方面 进行 说 明 。 

1. 标签 必须 嵌 套 使 用 

在 HTML 中 ,<html> 二 head>> 二 /html> 二 /head>” 这 样 的 错误 可 能 会 被 忽略 ， 
但 是 在 XHTML 中 是 不 允许 的 ,标签 必须 嵌 套 使 用 ,所 以 必须 写成 “二 html> 所 head 二 
</head> </html>”, 

2. 标签 和 属性 名 必须 小 写 

属性 是 标签 的 一 个 组 成 部 分 ,用 于 标签 内 部 ,设置 标签 的 一 些 特征 ,比如 二 table width 一 
"700" 二 ,其 中 width 就 是 属性 ,用 来 设置 表格 的 宽度 为 700 像素 。 在 XHTML 中 ,要 求 所 有 
的 标签 和 属性 都 要 小 写 , 如 果 把 二 table> 写 成 二 TABLE > 或 者 把 二 table width 王 "700" 二 写 
成 二 table WIDTH== "700" 盖 ,都 是 错误 的 。 在 HTML 中 则 不 区 分 大 小 写 。 

3. 属性 值 必须 在 "" 中 

在 XHTML 中 ,如 果 把 过 table width 二 "700" 放 写成 二 table width 王 700 二 ,是 不 允许 
的 ,但 是 在 HTML 中 ,这 样 的 写法 不 会 影响 网 页 的 显示 效果 。 

4. 成 对 标签 不 能 省 略 结束 标签 

在 XHTML 中 ,如 果 在 编写 一 个 表格 时 将 二 /table> 标 签 省 略 了 ,也 是 不 允许 的 。 
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5. 独立 标签 必须 以 *“/" 作 为 结束 符 

在 HTML 中 独立 标签 里 面 没有 */”, 而 XHTML 则 要 求 以 “/” 作 为 独立 标签 的 结束 符 。 
比如 图 像 标签 在 HTML 中 是 一 img> ,而 在 XHTML 中 则 必须 写成 <img /二 。 

虽然 出 现 了 XHTML 和 XML, 但 是 了 解 和 学 习 HTML 还 是 有 必要 的 。 因 为 学 习 
HTML, 对 继续 研究 XHTML ,进而 向 XML 过 渡 , 有 一 定 的 帮助 作用 ; 而 且 , 就 目前 而 言 ， 
HTML 仍然 在 使 用 ,在 2000 年 年 底 国际 W3C 组 织 发 行 了 XHTML 1. 0 版 本 之 后 ,HTML 
仍然 继续 发 展 ,并 在 2008 年 推出 了 5. 0 版 本 ,可见 HTML 依旧 得 到 市 场 的 重视 。 
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本 章 将 对 Dreamweaver 进行 简单 的 介绍 ,帮助 读者 认识 Dreamweaver 的 主要 功能 , 介 
绍 如 何在 网 页 上 使 用 表格 ,如 何 添加 图 像 和 文本 以 及 如 何 对 它们 进行 属性 设置 。 另 外 ,本 章 
还 将 介绍 表格 ,图 像 和 文本 的 相关 HTML 标签 ,讲解 它们 的 主要 属性 。 


本 章 学 习 要 点 : 

(1) 认识 Dreamweaver 

(2) 掌握 表格 的 使 用 

(3) 掌握 图 像 的 使 用 

(4) 掌握 文本 的 属性 设置 

(5) 理解 表格 的 相关 标签 及 其 属性 
(6) 理解 图 像 标签 及 其 属性 

(7) 理解 文本 的 相关 标签 及 其 属性 


4.1 认识 Dreamweaver 


Dreamweaver 是 目前 市 场 上 流行 的 一 款 网 页 制作 软件 , 它 是 一 个 可 视 化 的 网 页 制作 和 
网 站 管理 工具 ,支持 最 新 的 Web 技术 ,包含 HTML 检查 .HTML 格式 控制 .HTML 格式 化 
选项 .可 视 化 网 页 制作 、 图 像 编 辑 .全 局 查找 替换 .全 FTP 功能 、 处 理 Flash 和 Shockwave 等 
媒体 格式 和 动态 HTML, 并 提供 浏览 器 兼容 性 测试 和 便捷 的 网 站 管理 功能 。 在 
Dreamweaver 中 有 两 种 网 页 编辑 视图 : 设计 视图 和 代码 视图 。 这 两 种 视图 分 别提 供 网 页 制 
作 的 可 视 化 方式 和 源码 编辑 方式 。 

本 书 将 使 用 Adobe Dreamweaver CS5 来 完成 网 页 制作 。 


4.1.1 安装 Dreamweaver 


双击 Dreamweaver CS5 的 安装 程序 ,进入 安装 界面 ,如 图 4-1 所 示 ,安装 步骤 如 下 。 

(1) 单 击 “接受 ”按钮 ,进入 下 一 步 。 

(2) 输入 序列 号 ,并 选择 语言 为 “简体 中 文 ”, 单 击 *“ 下 一 步 ? 按 钮 。 

(3) 在 “输入 Adobe ID 界面 中 ,可 以 选择 创建 Adobe ID ,也 可 以 跳 过 此 步骤。 

(4) 接着 进入 “安装 选项 "界面 ,在 “位 置 " 栏 中 ,可 以 单 击 右边 的 文件 夹 图 标 ,选择 更 改 
程序 的 安装 位 置 ,如 图 4-2 所 示 。 

(5) 单 击 “ 安 装 ” 按 钮 之 后 ,就 进入 “安装 进度 ”界面 ,等 待 几 分 钟 ,Dreamweaver CS5 安 
装 完成 ,出 现 如 图 4-3 所 示 界 面 , 单 击 “完成 "按钮 , 即 结束 Dreamweaver CS5 的 安装 。 
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" adaobe Dreamvweaver CS5 


ny 欢迎 使 用 
Mdobe Adobe Dreamweaver CS5 3 


Adobe 软件 许可 协议 
ADOBE 


欢迎 使 用 软件 许可 协议 
[0 用 户 须知 : 请 仔细 阅读 本 协议 。 相 软件 的 所 有 或 任何 部 分 一 经 复制 、 安 装 或 使 用 ,您 即 接受 本 协议 中 规定 的 所 有 
条 款 和 条 件 ,特别 是 其 中 对 下 列 内 容 的 规定 : 可 转让 性 ( 第 4 条 ) 、 担 保 ( 第 6 和 第 7 条 ) 、 责 任 ( 第 8 条 ) 以 及 连 
接 性 和 隐秘 ( 第 14 条 ) ， 以 及 特殊 规定 和 例外 ( 第 16 条 ) 。 您 同意 本 协议 与 由 您 签署 的 任何 通过 谈 兰 订 立 的 任何 
选 弄 书面 协议 一 样 。 丰 协议 对 您 和 取得 软件 并 由 他 人 代表 使 用 本 软件 的 任何 法 人 实体 均 可 执行 : 例如 您 的 容 主 ( 如 果 
适用 ) 。 如 不 同意 本 协议 的 条 款 ， 请 不 要 使 月 本 软件 。 有 关 本 软件 退回 和 退 款 的 信息 ,请 浏览 
http.Jwww.adote com/go/support cn。 


Adobe ID 


您 可 以 与 ADOBE 直 接 订 立 另 一 书面 协议 ( 加 批量 许可 证 协议 ) ， 补 充 或 普 执 本 协议 的 全 部 或 任何 部 分 。 


ADOBE 及 其 供应 商 拥有 本 软件 的 所 有 知识 产权 。 本 软件 只 供 许可 使 用 ,不 宰 出 售 。ADOBE 只 允许 悠 在 六 守 本 协 
议 各 项 条 款 的 情 吕 下 复制 合用、 下载 、 安 装 、 使 用 或 以 其 地 方式 受 苍 于 本 软件 的 功能 或 知识 产权 。 使 用 本 软件 所 
包 合 的 ， 或 通过 本 软件 访问 的 一 些 ADOBE 和 本 ADOBE 材 料 与 最 务 ， 可 能 需 遵 守 其 地 条 款 与 条 件 ,这些 条 款 与 条 
件 一 般 载 于 单独 的 许可 协议 、 使 用 条 款 ， 或 该 材料 或 服务 内 部 或 周围 的 自述 文件 中 ， 或 可 在 

hipJwww adoke coryaohhirdpart，cn 上 找到 。 您 可 以 在 该 网 站 上 找到 关于 砷 ADOBE 村 料 的 必要 声 汲 , 


本 软件 可 能 导致 儿 的 计算 机 自动 演 接 到 因 特 同 。 有关 其 地 信息 ,请 参见 弟 14 和 16 条 。 
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图 4-2 安装 界面 2 
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开始 使 用 : Creative Suite 产品 和 服务 
序列 号 无 效 。 到 je 订阅。 


图 4-3 安装 界面 3 


4.1.2 Dreamweaver 的 基本 界面 


单 击 Windows 桌面 左下 角 的 “开始 ”按钮 ,选择 "所 有 程序 ”>Adobe Dreamweaver CS5 
命令 ,开始 运行 Dreamweaver CS5。 第 一 次 运行 时 ,会 出 现 * 默 认 编 辑 器 ”的 设置 对 话 框 , 如 
图 4-4 所 示 ,直接 单 击 “确定 ”按钮 即 可 。 


Adobe Dreanweaver CS5 将 其 自身 设置 为 以 下 文件 类 型 的 默认 编辑 器 


回 Aetive Server Pages (asp) JavaScript Gs) 

Java Server Pages Osp) 层 查 样式 表 (CSS) 

回 casion (cfm，cfc) 可 扩展 标记 语言 xml) 
ASP. NET (aspx, ascx) XSL 样式 表 sl，xslt) 
PHP (php, php3, php4) 


ae] Cs 


图 4-4 默认 编辑 器 设置 


Dreamweaver 通常 被 简称 为 Dw, 打 开 Dreamweaver 的 操作 界面 ,如 图 4-5 所 示 , 可 以 
看 到 左上 角 显 示 “Dw” 字 样 。 
在 Dreamweaver 的 操作 界面 中 ,上 端 是 “文件 ”“ 编 辑 ”"“ 查 看 ”等 菜单 组 成 的 菜单 栏 ， 


第 4 章 网 页 制作 : 添加 图 文 (OL) 


Dw | 一 0 se 蕊 到 攻 局 
文件 加 ”编辑 () ”查看 妇 ”插入 D 修改 如 ”格式 多 ”命令 吕 ”站 点 (合谋 口 D 玫 助 0 
项 目 新 建 主要 功能 Adobe BrowserLab 
EN 
EP ial sus ri 
全 ColdFusion a 
图 丁 Eq LE 
同 Asp Vegeript 动 才 相关 文件 | 黄 淆 鸭 容 的 六 要 
~ 下 对 吉 训 天 任何 
由 zr | eR A 
二 css 
全 Javascript BrowserLab 集 成 
Dm 局 更 多 . 
品 Dreamweavar 站 点 人 
DS. 阿 二 
hn 打 直 全 公设 育 信用 133 规 到 ， 
» 升 领 至 Dresaweaver Cs5.5 
属性 
星 桩 
二 All 驯 信 昌 
EE | 
图 4-5 操作 界面 


中 间 部 分 是 网 页 的 主要 编辑 窗口 , 当 未 打开 任何 文档 时 ,这 个 窗口 显示 的 是 “项 目 ”“ 新 建 ”、 
“主要 功能 ”。 在 Dreamweaver 操作 界面 的 下 端 和 右边 ,分 别 是 属性 面板 和 一 些 其 他 的 常用 
面板 ,这 些 面板 在 今后 需要 使 用 时 再 一 一 介绍 。 


4.1.3 网 站 管理 


网 站 管理 是 Dreamweaver 提供 的 一 个 重要 功能 , 它 可 以 把 硬盘 中 的 某 个 站 点 根 目 录 的 
内 容 映 射 到 Dreamweaver 的 “文件 ”面板 中 ,这 样 便 可 以 直接 在 “文件 ”面板 中 对 网 站 中 的 文 
件 进行 打开 、 重 命名 移动 位 置 等 管理 ,并 且 当 改变 文件 的 名 字 或 保存 位 置 时 ,不 会 破坏 文件 
之 间 的 关联 性 。 

鉴于 网 站 管理 的 种 种 便利 ,在 进行 网 页 制作 之 前 ,应 该 先 在 Dreamweaver 中 创建 一 
站 点 ,这 是 一 个 重要 的 习惯 。 

【案例 演示 4-1】 在 Dreamweaver 中 ,为 个 人 网 站 “爱心 屋 ” 创 建站 点 。 

(1) 选择 “站 点 ”>“ 新 建站 点 ”命令 。 

(2) 在 打开 的 设置 窗口 中 ,输入 站 点 名 称 , 并 单 击 “ 本 地 站 点 文件 夹 ”右边 的 文件 夹 图 
标 ,选择 “爱心 屋 ” 网 站 的 根 目录 ,如 图 4-6 所 示 。 

(3) 单 击 窗口 左 侧 的 “高 级 设置 ">“ 本 地 信息 ”选项 ,在 右 侧 出 现 “ 默 认 图 像 文 件 夹 ”, 单 
击 其 右边 的 文件 夹 图 标 ,选择 “爱心 屋 ” 根 目录 下 的 tuxiang 文件 夹 , 如 图 4-7 所 示 。 

(4) 最 后 单 击 “ 保 存 ” 按 钮 ,完成 Dreamweaver 中 站 点 的 创建 。 

创建 了 站 点 之 后 ,就 可 以 在 Dreamweaver 操作 界面 右 侧 的 “文件 ”面板 中 看 到 “爱心 屋 ” 
网 站 的 所 有 内 容 , 如 图 4-8 所 示 。 这 样 ,通过 “文件 ”面板 就 可 以 进行 网 站 管理 了 。 
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站 点 设置 对 象 爱心 屋 


站 点 设置 对 象 爱心 屋 


Contribute 
模板 
Spy 


Dreamweaver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Dreamweaver 
站 点 通常 包含 两 个 部 分 : 可 在 其 中 存储 和 处 理 文件 的 计算 机 上 的 本 地 文件 
夹 ， 以 及 可 在 其 中 将 相同 文件 发 布 到 Web 上 的 服务 器 上 的 远程 文件 来 。 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
站 点 名 称 : [爱心 层 
本 地 站 点 文件 夹 : | E: 爱心 屋 \ 


4-6 站 点 基本 信息 设置 


[|E: 爱心 必 Wiang 
: 回 文 档 口 站 点 根 目录 


s [http:// 


人 碱 狂 入 Web URL。 向 加 已 启 风 全 压 
部 ，Dreamweaver 将 借用 怖 务 癌 座 置 中 搁 庆 的 Web URL 


口 区 分 大 小 写 的 链接 检查 
回 局 用 缓存 
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图 4-8 文件 面板 中 显示 的 站 点 
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4.1.4 基本 操作 


Dreamweaver 的 操作 主要 是 针对 网 页 进行 的 ,最 基本 的 操作 有 新 建 网 页 、 保 存 网 页 、 打 
开 网 页 和 关闭 网 页 。 

1. 新 建 网 页 

选择 “文件 ”>“ 新 建 "命令 。 

如 果 需 要 的 是 一 个 普通 静态 网 页 .就 选择 “空白 页 ”选项 ,在 “页 面 类 型 "中 选择 HTML 
选项 ,在 “布局 "中 选择 “无 ”选项 ,然后 单 击 “ 创 建 " 按 钮 。 如 果 需 要 其 他 类 型 的 网 页 ,就 需要 
在 “页 面 类 型 "中 选择 对 应 的 选项 。 

在 网 页 编辑 窗口 的 左上 角 , 有 一 个 文档 的 名 字 标 签 ,这 个 标签 显示 的 网 页 名 字 是 
Untitled-n, 当 网 页 被 保存 ,名 字 标 签 上 就 会 显示 网 页 的 名 字 。 

2. 保存 网 页 

选择 “文件 ”一 “保存 ”命令 。 

一 般 在 创建 了 站 点 之 后 ,选择 保存 的 时 候 , 文 档 保存 的 位 置 会 默认 的 定位 到 站 点 的 根 目 
录 下 ,比如 “爱心 屋 ” 的 根 目录 ,这 样 就 简化 了 选择 保存 位 置 的 步骤 。 这 时 ,只 要 选择 根 目录 
下 用 来 保存 网 页 的 文件 夹 , 比 如 wangye, 双 击 打开 它 , 再 输入 “文件 名 ”, 最 后 单 击 “ 保 存 ” 按 
钮 即 可 。 

保存 了 一 个 新 的 文档 之 后 ,在 “文件 ”面板 中 可 以 查看 到 它 。 

3. 设置 页 面 属 性 

选择 “修改 ”> “页面 属性 "命令 ,打开 “页 面 属性 "设置 窗口 。 选 择 “ 分 类 "中 的 “外 观 
(CSS) ”选项 ,可 以 设置 网 页 默认 使 用 的 字体 及 大 小 、 文 字 颜 色 、 背 景 颜色 、 背 景 图 像 。 只 需 
单 击 旁 边 的 按钮 ,就 可 以 对 这 些 属性 进行 选择 设置 。 

设置 完 背 景 图 像 之 后 ,再 通过 “重复 ”选项 ,可 以 设置 背景 图 像 的 显示 模式 。“ 重 复 ” 有 
4 个 选项 ,作用 如 下 。 

(1) no-repeat: 表示 背景 图 像 不 重复 显示 ,如 果 图 像 比 背景 小 ,背景 不 会 被 图 像 铺 满 。 

(2) repeat: 表示 背景 图 像 重 复 显示 ,如 果 图 像 比 背景 小 ,图 像 重 复 显示 将 背景 铺 满 。 

(3) repeat-x: 表示 背景 图 像 在 水 平方 向 上 重复 显示 ,如 果 图 像 的 宽度 比 背景 小 ,图 像 
将 横向 重复 显示 ,在 水 平方 向 上 把 背景 铺 满 。 

(4) repeat-y: 表示 背景 图 像 在 垂直 方向 上 重复 显示 ,如 果 图 像 的 高 度 比 背 景 小 ,图 像 
将 竖 向 重复 显示 ,在 垂直 方向 上 把 背景 铺 满 。 

其 他 页 面 属性 ,将 在 需要 使 用 时 再 做 介绍 。 

4. 浏览 网 页 

在 Dreamweaver 的 编辑 窗口 中 , 按 Fl12 键 就 可 以 浏览 到 网 页 的 效果 。 如 果 在 按 F12 键 
之 后 弹出 一 个 窗口 ,询问 “是 否 将 改动 保存 到 XX 文件 ?”, 单 击 “ 确 定 ”按钮 。 

浏览 网 页 的 另外 一 种 方式 是 通过 单 击 Dreamweaver 编辑 窗口 上 方 的 辆 .图 标 ,在 弹出 
的 菜单 中 选择 “预览 在 IExplore”, 同 样 会 打开 一 个 浏览 器 窗口 ,查看 到 网 页 的 制作 效果 。 

5. 打开 网 页 

打开 网 页 的 常用 方式 有 两 种 。 一 是 通过 选择 “文件 ”>“ 打 开 ” 命 令 , 选 择 需 要 的 文档 , 单 
击 “ 打 开 ” 按 钮 ; 二 是 通过 “文件 ”面板 ,双击 需要 的 文档 。 
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6. 关闭 网 页 

关闭 网 页 也 有 两 种 方式 。 一 是 通过 选择 "文件 ”一 “关闭 ”命令 ; 二 是 直接 单 击 网 页 名 字 
标签 右 侧 的 x 按钮 ,关闭 当前 正在 编辑 的 网 页 。 

7. 重 命名 网 页 

重 命名 网 页 一 般 通 过 “文件 ”面板 完成 。 在 “文件 ”面板 上 ,找到 要 修改 的 网 页 ,右键 单 
击 ,在 弹出 菜单 中 选择 “编辑 ”>“ 重 命名 ”命令 ,这 时 网 页 的 名 字 变 成 可 修改 的 状态 ,直接 输 
入 网 页 的 名 字 即 可 。 

8. 删除 网 页 

在 “文件 ”面板 上 ,找到 要 删除 的 网 页 , 右 击 ,在 弹出 菜单 中 选择 “编辑 ”>“ 删 除 ”命令 ,在 
弹出 的 确认 框 中 单 击 “ 是 ”按钮 ,文件 就 被 删除 。 如 果 在 确认 的 时 候 单 击 了 “ 否 "按钮 ,那么 文 
件 就 会 被 继续 保存 下 来 。 因 为 删除 是 一 个 需要 慎重 考虑 的 操作 ,所 以 一 般 在 删除 的 过 程 中 

会 出 现 确 认 框 ,以 帮助 用 户 避 免 误 删 文件 。 


< 任务 4.1 
内 容 : 在 Dreamweaver 中 创建 个 人 网 站 的 站 点 。 


4.2 表 格 


表格 在 网 页 中 主要 起 排版 的 作用 。 在 Fireworks 中 对 网 页 界面 设计 图 进行 分 割 并 导出 
网 页 之 后 ,根据 分 割 的 结构 ,网 页 上 就 生成 了 一 个 相应 结构 的 表格 。 接 下 来 将 以 “爱心 屋 ” 网 
站 的 主页 index. htm 为 例 ,讲解 表格 的 使 用 ,并 对 表格 做 一 些 调整 ,为 在 网 页 上 添加 图 文 做 
好 准备 。 


4.2.1 基本 属性 


通过 “文件 ”面板 ,打开 “爱心 屋 ” 网 站 的 主页 index. htm, 可 以 看 到 网 页 的 外 围 有 一 个 虚 
线 框 ,这 就 是 一 个 表格 。 这 个 表格 被 分 割 成 了 若干 个 单元 格 ,网 页 上 所 有 的 图 像 都 被 放 在 这 
个 表格 里 头 ,一 个 图 像 占据 一 个 单元 格 。 

1. 选择 表格 和 单元 格 

在 HTML 中 ,表格 ,表格 中 的 一 行 、 单 元 格 的 标签 分 别 是 二 table 二 过/table 二 、 
<tr> 志 /tr> <td> 二 /td>。 在 网 页 编辑 窗口 的 下 方 ,有 一 个 标签 栏 , 上 面 显 示 了 当前 网 
页 对 象 的 标签 ,如 图 4-9 所 示 。 当 选中 了 表格 中 的 某 个 对 象 时 ,标签 aaaaqeeyeayai 
栏 上 就 会 显示 出 二 table>、 一 tr>、 一 td 等 标签 。 单 击 二 table 之 标 


签 , 整 个 表格 就 会 被 选中 ; 单 击 一 td 标签 ,当前 选择 的 对 象 所 在 的 图 人 8 标签 检 
单元 格 即 被 选中 。 

2. 设置 表格 属性 

选择 表格 之 后 ,Dreamweaver 的 属性 面板 出 现 表格 的 属性 ,如 图 4-10 所 示 。 各 个 常用 
属性 的 含义 如 下 。 


(1) 行 \ 列 : 分 别 设置 表格 中 行 和 列 的 数量 。 
(2) 宽 : 设置 表格 的 宽度 ,默认 情况 下 以 “像素 ”为 单位 。 
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(3) 填充 : 设置 每 个 单元 格 中 的 内 容 与 单元 格 边 界 的 距离 。 如 果 设 置 为 0, 说 明 单 元 格 
里 面 添加 的 内 容 将 紧 靠 单元 格 的 边界 ,不 留 缝隙 。 

(4) 间距 : 设置 每 个 单元 格 之 间 的 距离 。 如 果 设 置 为 0, 说 明 每 个 单元 格 紧 靠 在 一 起 ， 
没有 缝隙 。 

(5) 对 齐 : 设置 整个 表格 在 网 页 中 的 对 齐 方式 ,默认 情况 下 是 靠 左 , 如 果 选 择 * 居 中 对 
齐 ? 选 项 ,表格 就 会 被 调整 到 网 页 的 正中 间 。 

(6) 边框 : 设置 网 页 的 边界 线 。 如 果 设 置 为 1 或 1 以 上 的 值 ,表格 将 显示 它 的 边界 线 ; 
如 果 设 置 为 0, 在 编辑 窗口 中 ,表格 边界 显示 的 就 是 虚线 , 当 浏 览 网 页 的 时 候 , 表 格 的 边 是 看 
不 到 的 。 


Fireworks 表 格 行 @jze | 宽 旭 |350 ji 境 素 ” 吕 | 填充 加 jo。 | 对 齐全 ) | 默认 习 
[| 加 | 间距 各 0 ”| 边框 凶 |0 ”| 


图 4-10 表格 属性 面板 


3. 设置 单元 格 属性 

选择 单元 格 之 后 ,属性 面板 上 出 现 单元 格 的 属性 ,如 图 4-11 所 示 。 各 个 常用 属性 的 含 
义 如 下 。 

(1) 水 平 : 设置 单元 格 中 内 容 的 水 平 对 齐 方式 ,如 果 选 择 “ 居 中 对 齐 ” 选 项 ,单元 格 中 的 
内 容 就 会 被 调整 到 水 平方 向 上 正中 间 的 位 置 。 

(2) 垂直 : 设置 单元 格 中 内 容 的 垂直 对 齐 方式 ,如 果 选 择 * 顶端 选项 ,单元 格 中 的 内 容 
就 会 被 调整 到 垂直 方向 上 最 上 方 的 位 置 。 

(3) 宽 、 高 : 分 别 设置 单元 格 的 宽度 和 高 度 , 以 像素 为 单位 。 

(4) 背景 颜色 : 设置 单元 格 的 背景 颜色 , 单 击 国 按 钮 ,在 弹出 的 色 盘 中 选择 一 种 颜色 。 


单元 格 。 水 平 名 )| 默认 | 宽恕 | 不 换行 @) 口 背景 颜色 G) [| | 
[= Y 高 负 标题 @) 


图 4-11 单元 格 属性 面板 


4. 设置 单元 格 背 景 图 像 

选择 单元 格 之 后 , 单 击 属性 面板 (如 图 4-12 所 示 ) 上 半 部 分 左 侧 的 CSS 按钮 ,再 单 击 “ 编 
辑 规则 ”按钮 。 打 开 * 新 建 CSS 规则 ”对 话 框 后 ,在 | 
“选择 器 类 型 "中 选择 “类 (可 应 用 于 任何 HTML 元 [本 es] 
素 )” 选 项 ,在 “选择 器 名 称 ” 中 输入 任意 的 名 称 , 在 “ 规 
则 定义 ”中 选择 *( 仅 限 该 文档 )" 选 项 ,然后 单 击 “ 确 
定 ” 按 钮 。 

在 弹出 的 “CSS 规则 定义 ”对 话 框 中 继续 设置 ,在 “分 类 ”中 选择 “背景 "选项 ,然后 单 击 
Background-image 的 “浏览 ”按钮 ,选取 需要 的 图 像 , 单 击 “ 确 定 ” 按 钮 。 

【案例 演示 4-2】 在 个 人 网 站 “爱心 屋 ” 的 主页 上 ,对 “爱心 美文 ”板块 中 需要 添加 文字 
信息 的 单元 格 进行 属性 修改 ,把 单元 格 中 原 有 的 图 像 设置 为 单元 格 的 背景 图 像 。 

(1) 在 网 页 右 侧 的 “爱心 美文 ?板块 中 , 单 击 要 显示 文字 信息 的 单元 格 ,选中 单元 格 中 的 


图 4-12 编辑 单元 格 的 CSS 属性 
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绿色 图 像 , 记 下 图 像 的 名 字 是 index_rl1_c9 ,然后 按 Delete 键 ,将 图 像 删除 。 

(2) 单 击 属性 面板 上 的 CSS 按钮 ,再 单 击 “ 编 辑 规则 ”按钮 ,在 “选择 器 类 型 "中 选择 “类 
(可 应 用 于 任何 HTML 元 素 )” 选 项 ,在 “选择 器 名称 ”中 输入 td1, 在 “规则 定义 ”中 选择 “( 仅 
限 该 文档 )” 选 项 ,然后 单 击 “ 确 定 ” 按 钮 。 

(3) 在 弹出 的 “CSS 规则 定义 ”对 话 框 中 , 在 “分 类 ”中 选择 “背景 "按钮 , 单 击 
Background-image 的 “浏览 ”按钮 ,定位 到 网 站 根 目录 下 的 tuxiang 文件 夹 ,选取 index_rll_ 
c9, 单 击 “ 确 定 ” 按 钮 。 

(4) 这 样 ,图 像 index_rl1_c9 就 被 设置 成 单元 格 的 背景 图 像 ,原来 被 图 像 占据 的 单元 格 
就 “ 空 ? 出 来 了 ; 在 4. 2. 2 小 节 中 ,将 在 其 中 添加 说 套 表格 。 


4.2.2 创建 表格 


在 网 页 中 添加 表格 一 般 是 为 了 排版 ,比如 添加 10 条 新 闻 标 题 ,每 条 新 闻 标 题 还 包含 有 
日 期 ,这 时 就 需要 一 个 10 行 2 列 的 表格 ,通过 调整 表格 的 行 高 和 列 宽 , 可 以 分 别 排版 标题 之 
间 的 距离 以 及 每 一 行 中 标题 和 日 期 的 距离 。 

1. 新 建 表格 

选择 “窗口 ”> 插入 ”命令 ,在 Dreamweaver 的 操作 界面 右边 ,出 现 “ 插 入 ”面板 。“ 插 
入 ”面板 的 工具 包括 常用 \ 布 局、 表单 等 多 种 类 型 ,默认 情况 下 ,显示 “常用 ”工具 。 单 击 “ 常 
用 ”工具 ,在 弹出 的 菜单 中 选择 其 他 的 选项 ,可 以 显示 不 同类 型 的 工具 。 

在 “常用 ”工具 中 , 单 击 “ 表 格 " 按 钮 国 ,在 弹出 的 “表格 ”设置 对 话 框 (如 图 4-13 所 示 ) 中 
输入 行 数 、 列 数 、 表 格 宽度 .边框 粗细 , 边 距 和 间距 ,然后 单 击 * 确 定 ” 按 钮 。 这 样 就 新 建 了 一 
个 表格 。 


图 4-13 “表格 ”对 话 框 


选中 表格 ,仍然 可 以 通过 属性 面板 改变 表格 的 属性 。 


第 4 章 网 页 制作 :添加 国文 “站 站 站 


2. 拆 分 单元 格 

把 一 个 单元 格 变 成 多 行 或 者 多 列 的 操作 叫做 “ 拆 分 单元 格 ”。 在 单元 格 的 属性 面板 上 ， 
提供 了 “ 拆 分 单元 格 ” 的 工具 按钮 。 

首先 ,选择 要 拆 分 的 单元 格 ; 然后 , 单 击 属性 ” 息 计 玫 呈 
面板 左下 角 的 薄 按钮 ; 在 “ 拆 分 单元 格 ”对 话 框 
(如 图 4-14 所 示 ) 中 ,选择 行 或 者 列 , 表 示 要 把 单 
元 格 拆 成 多 行 或 者 多 列 , 并 设置 行 数 或 列 数 ,最 
后 单 击 “ 确 定 ” 按 钮 。 

单元 格 拆 分 成 多 行 之 后 ,会 存在 这 样 的 问 
题 ,如 果 该 单元 格 的 两 侧 有 其 他 单元 格 ,扩大 新 
拆 分 出 来 的 行 的 高 度 ,两 侧 单元 格 必然 会 随 着 扩大 ,如 图 4-15 所 示 ; 如 果 两 侧 单元 格 的 高 
度 固 定 住 了 , 则 无 法 调整 新 拆 分 出 来 的 行 的 下 边界 ,如 图 4-16 右 图 第 2 列 第 2 行 所 示 。 拆 
分 成 多 列 也 存在 同样 的 问题 。 


4-14 “ 拆 分 单元 格 ”对 话 框 


图 4-16 拆 分 单元 格 被 两 侧 限 制 


上 述 的 第 一 个 问题 ,在 第 3. 2. 1 小 节 中 介绍 “切割 图 像 的 基本 原则 之 二 ”时 ,也 曾经 提 到 
过 ,也 介绍 了 解决 的 办 法 ,这 里 不 再 袭 述 ; 第 二 个 问题 , 则 可 以 通过 嵌 套 表格 来 解决 ,在 本 节 
第 4 小 点 会 进行 讲解 。 

3. 合并 单元 格 

合并 单元 格 是 指 把 多 个 单元 格 变 成 一 个 单元 格 。 在 单元 格 的 属性 面板 上 ,提供 了 “合并 
单元 格 ” 的 工具 按钮 。 

首先 ,选中 多 个 单元 格 ; 然后 , 单 击 属性 面板 上 左下 角 的 加 按钮 ,多 个 单元 格 马上 就 被 
“合并 ?为 一 个 。 

4. 添加 嵌 套 表格 

当 一 个 表格 被 添加 到 另 一 个 单元 格 中 时 ,这 个 表格 就 叫做 “ 嵌 套 表格 ”。 

添加 嵌 套 表格 的 步骤 跟 新 建 一 个 普通 表格 一 样 ,但 是 要 注意 3 个 问题 。 


(CF 46| 网 站 开发 基础 教程 


(1) 添加 嵌 套 表格 之 前 ,要 先 把 光标 定位 到 单元 格 中 。 

(2) 设置 表格 宽度 的 时 候 , 单 位 应 该 选择 “百分比 ”"。 如 果 希 望 谋 套 表格 和 单元 格 一 样 大 
小 ,就 把 嵌 套 表格 的 宽度 设置 为 “100 百分比 "。 苦 套 表格 的 宽度 不 应 该 超过 单元 格 的 宽度 。 

(3) 嵌 套 表格 的 高 度 不 应 该 超过 单元 格 的 高 度 , 否 则 单元 格 被 “ 撑 大 ”后 ,旁边 的 单元 格 
也 会 “ 变 高 ”, 最 终 导 致 外 层 表格 变形 。 在 (2) 中 嵌 套 表格 宽度 不 应 该 超过 单元 格 宽度 ,也 是 
同样 的 原因 。 

为 什么 需要 添加 嵌 套 表格 呢 ? 拆 分 单元 格 之 后 ,新 拆 分 出 来 的 某 行 或 某 列 的 调整 可 能 
受到 限制 ,而 使 用 典 套 表格 ,这 个 问题 就 可 以 得 到 解决 。 

以 “爱心 屋 ” 主 页 为 例 ,如 要 在 “爱心 美文 "的 展示 区 域 中 添加 4 行 ,如 果 使 用 拆 分 的 方 
式 , 就 会 出 现 上 述 问题 ,如 果 往 单元 格 中 添加 一 个 5 行 1 列 的 嵌 套 表格 ,问题 就 能 得 到 解决 ， 
如 图 4-17 所 示 。 


爱心 美文 


more. - - 爱心 美文 


图 4-17 利用 铸 套 表格 替代 拆 分 单元 格 


伟 ` 任 务 4.2 


内 容 : 

(1) 在 Dreamweaver 中 编辑 个 人 网 站 的 主页 index. htm 和 子 页 subpage. htm, 要 求 对 需要 
添加 文字 信息 的 单元 格 进行 属性 修改 ,把 单元 格 中 原 有 的 图 像 设置 为 单元 格 的 背景 图 像 。 

(2) 根据 个 人 网 站 的 实际 需要 ,在 主页 上 添加 嵌 套 表格 。 
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4.3 图 像 


在 网 页 制作 阶段 ,有 时 想 要 在 网 页 上 添加 一 些 图 像 , 比 如 动画 图 标 ,这 样 网 页 看 起 来 会 
更 生动 一 些 。Dreamweaver 提供 了 在 网 页 上 添加 图 像 的 功能 。 


4.3.1 添加 图 像 


单 击 网 页 上 需要 添加 图 像 的 位 置 ,然后 选择 “窗口 ”~* 插 人 ”命令 ,在 Dreamweaver 的 
操作 界面 右边 出 现 * 插 入 ”面板 。 在 “常用 "工具 中 , 单 击 * 图 像 "按钮 图 ,在 弹出 的 “选择 图 像 
源 文件 ?对 话 框 (如 图 4-18 所 示 ) 中 选择 图 像 , 单 击 “ 确 定 ” 按 钮 之 后 ,如 果 出 现 “ 图 像 标 签 辅 
助 功 能 属性 ”对 话 框 , 单 击 “ 确 定 ” 或 “取消 "按钮 都 可 以 。 


pr 
〇 数据 源 和 


查找 范围 中 ;| 局 twiwne -图 日 证 巴 回 - 


图 subpase_r9_c3 加 

国 subpaee_r9_c3 加 

国 subpaee_r9_e7 

国 subpaee_r9_c7 

图 :subpager9_c6 国 xttz 

图 subpaee_r9_c6 图 xztt3 

< 

文件 名 如 xiaotubiao_new 188 x 120 GIF, 31 K/1 


文件 类 型 I); 图像 文件 (gif:# jpg;# jpeg;*# png;* 扣 [到 光 ] 


/tuxiang/xiaotubiao_new, if 
相对 于 文档 Windex, htn 
在 站 点 定义 中 更 改 默 认 的 链接 相对 于 


图 4-18 “选择 图 像 源 文件 ”对 话 框 


注意 : 在 “选择 图 像 源 文件 ”对 话 框 中 ,有 一 个 “相对 于 ” 栏 ,应 该 选择 “文档 ”选项 ,如 果 
选择 “站 点 根 目录 ”选项 ,可 能 导致 图 像 不 能 正常 显示 。 

男 外 ,由 于 “图 像 标签 辅助 功能 属性 ”对 话 框 作用 不 大 ,而 且 目 前 暂时 没有 用 到 ,所 以 可 
以 将 它 取消 让 它 不 要 再 弹出 来 。 具 体 做 法 是 : 选择 “编辑 >“ 首选 参数 ”命令 ,在 “分 类 ”中 
选择 “辅助 功能 ”选项 ,取消 选择 右边 关于 “图 像 复 选 框 ,然后 单 击 “ 确 定 ” 按 钮 ,这 样 以 后 添 
加 图 像 就 不 会 再 弹出 “图 像 标签 辅助 功能 属性 ”了 。 


4.3.2 图 像 属 性 


1. 调整 大 小 

添加 图 像 之 后 ,图 像 的 大 小 不 一 定 符合 要 求 , 有 时 需要 进行 调整 。 

调整 图 像 大 小 有 两 种 方式 。 第 一 种 方式 ,选中 图 像 ,在 属性 面板 上 输入 “ 宽 " 和 “高 ”的 
值 ; 第 二 种 方式 ,选中 图 像 , 图 像 的 四 周 出 现 小 黑 块 , 拖 动 这 些小 黑 块 ,可 以 自由 地 调整 图 像 
的 大 小 。 
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2. 图 像 属性 面板 
图 像 被 选中 之 后 ,属性 面板 上 出 现 图 像 的 属性 ,如 图 4-19 所 示 。 图 像 最 重要 的 两 个 属 
性 是 “ 源 文件 "和 “替换 ”。 


EE De 
[new| 图 你,，31K 。 宽 旭 32 。 门 源 文件 人 @) /xiaotubiso_new aifl 伟 已 堵 执 四 || ~ 
可 ] 高 四 加 “19 访 思 加 局 绩 jp 


图 4-19 图 像 属 性 面板 


“ 源 文件 ”显示 的 是 图 像 在 硬盘 上 的 存放 路 径 , 该 路 径 是 一 个 相对 路 径 , 是 图 像 相 对 于 当 
前 正在 编辑 的 网 页 的 路 径 。 

如 果 改 变 了 源 文件 ,图 像 就 会 发 生变 化 。 比 如 “ 源 文件 "显示 
的 是 .. /tuxiang/xiaotubiao _new. gif, 而 事实 上 在 根 目录 下 的 
tuxiang 文件 夹 上 并 没有 xiaotubiao_new. gif 文件 ,这 时 图 像 就 
会 显示 错误 ,如 图 4-20 所 示 。 所 以 , 当 图 像 在 Dreamweaver 中 显 
示 错 误 时 , 需 检查 图 像 的 源 文件 与 实际 情况 是 否 一 致 。 图 4-20 图 像 的 源 文件 

“替换 ”用 来 设置 一 些 说 明文 字 , 当 浏览 网 页 的 时 候 将 鼠标 移 属性 出 错 
到 图 像 上 稍 作 停留 时 ,这 些 说 明文 字 就 会 出 现 ; 或 者 当 浏 览 网 页 
的 时 候 图 像 不 能 正常 显示 时 ,这 些 说 明文 字 也 会 出 现 。 

在 添加 图 像 的 时 候 , 还 需要 注意 图 像 的 文件 格式 。 一 般 在 网 页 上 添加 的 图 像 为 gif 或 
jpeg 格式 ,其 他 的 格式 可 能 导致 网 页 打开 速度 变 慢 ,比如 psd 格式 ; 或 者 导致 图 像 显示 错 
误 , 比 如 bmp 格式 。 


< 任务 4.3 
内 容 : 在 个 人 网 站 的 主页 上 添加 一 个 动画 图 像 , 注 意图 像 要 符合 主页 的 风格 。 
4.4 文 本 
在 网 页 中 如 果 需 要 添加 文本 ,可 以 直接 输入 或 者 从 其 他 地 方 复制 并 粘贴 到 网 页 中 。 


添加 文本 之 后 ,可 以 通过 属性 面板 对 文本 的 颜色 、 字 体 、 大 小 等 属性 进行 编辑 。 
在 “爱心 屋 ” 主 页 中 输入 文本 ,然后 选中 文本 ,属性 面板 上 就 出 现 文本 的 属性 ,如 图 21 所 示 。 


区 区 和 
+ 100% (459) 4 文 


区 你 的 大生 也 拥有 这 样 的 情怀 


目标 规则 | < 新 Css 规则 > | 字体 0) 默认 字体 BI 村 要 要 要 
和 | | CSS 项 RD) ] | 大 小 名 元 ”总 同 L | 


4-21 文本 的 基本 属性 
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文本 的 基本 属性 分 为 两 类 : HTML 和 CSS。 文本 的 字体 、 大 小 、 颜 色 等 外 观 属性 ,属于 
CSS 类 ,需要 在 属性 面板 上 单 击 CSS 按钮 才 可 以 看 到 。 文 本 的 HTML 类 属性 主要 包含 文 
本 的 链接 及 其 目标 的 设置 。 

下 面 先 介绍 文本 的 CSS 类 属性 的 设置 。 

1. 设置 字体 

在 “默认 字体 ”下 拉 列 表 框 中 选择 合适 的 字体 。 这 时 如 果 弹 出 “新 建 CSS 规则 ”对 话 框 ， 
可 在 “选择 器 名 称 ” 中 输入 任意 的 名 称 ,比如 wbl, 其 他 设置 都 保持 默认 选择 ,然后 单 击 “ 确 
定 ” 按 钮 ,就 完成 字体 的 设置 。 这 时 在 “目标 规则 ” 栏 会 出 现 刚刚 输入 的 选择 器 名 称 。 

还 可 以 在 下 拉 列 表 框 中 选择 “编辑 字体 列表 ”一 “可 用 字体 ”选项 , 单 击 罗 按钮 ,新 的 字 
体 就 会 出 现在 “选择 的 字体 ”和 "字体 列表 ”中 , 单 击 “ 确 定 ” 按 钮 ,完成 字体 的 添加 ,然后 再 回 
到 属性 面板 ,选择 新 添加 的 字体 ,重复 上 述 的 步骤 ,完成 字体 的 设置 。 

注意 : 网 页 上 的 文本 一 般 都 使 用 宋体 。 

2. 设置 文本 大 小 

单 击 * 大 小 ” 栏 右边 的 按钮 ,选择 一 个 数值 ,然后 单 击 数 值 右边 一 栏 ,选择 pt 选项 ,完成 
文本 大 小 的 设置 。 

px 和 pt 都 是 文本 大 小 的 单位 ,px 表示 像素 ,pt 表示 点 数 。 一 般 选择 pt 而 不 选 px, 因 
为 选择 px, 文 本 的 大 小 会 随 着 显示 器 分 辩 率 的 改变 而 改变 。 另 外 ,网 页 上 正文 的 大 小 一 般 
设置 为 9pt 或 10pt。 

3. 文本 颜色 

单 击 同 | 按钮 ,选择 其 中 一 种 颜色 即 可 改变 文本 的 颜色 。 

设置 了 一 段 文本 的 CSS 类 属性 之 后 ,这 些 设 置 会 被 保存 在 一 个 “选择 器 ”中 ,比如 ,上 面 
的 设置 被 保存 在 选择 器 wbl 中 。 如 果 其 他 的 文本 要 使 用 相同 的 设置 ,只 要 把 文本 选中 , 然 
后 在 属性 面板 的 “目标 规则 ”中 选择 wbl 选项 即 可 。 

如 果 多 段 文 本 使 用 了 同一 个 目标 规则 ,那么 ,改变 其 中 一 段 文本 的 外 观 相当 于 改变 了 目 
标 规 则 ,所 以 其 他 相关 文本 的 外 观 也 会 跟着 改变 。 
< 任务 4.4 

内 容 : 

(1) 在 个 人 网 站 的 主页 上 添加 所 有 文本 信息 ,并 设置 文本 的 CSS 类 属性 。 

(2) 制作 个 人 网 站 主页 上 第 一 个 栏目 对 应 的 子 页 。 

提示 : 在 子 页 上 把 某 些 单元 格 中 的 图 像 设置 为 背景 图 像 , 并 在 这 些 单元 格 中 添加 文本 
信息 ,设置 文本 的 CSS 类 属性 。 


4.5 关于 HTML: 表格 .图像 和 文本 


4.5.1 Dreamweaver 的 代码 视图 


1. 三 种 视图 
在 Dreamweaver 编辑 窗口 中 ,有 三 种 视图 : 代码 、 拆 分 、 设 计 。 一 般 , 都 是 在 设计 视图 下 
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编辑 网 页 ,因为 操作 起 来 更 便捷 ,并 且 能 够 即时 看 到 网 页 的 浏览 效果 。 不 过 有 时 候 ,也 需要 
使 用 代码 视图 添加 一 些 特殊 效果 的 代码 或 者 检查 代码 的 语法 。 
分 别 单 击 Dreamweaver 编辑 窗口 上 方 的 “代码 ”“ 拆 分 ”、“ 设 计 ” 央 新 人 | 设计 
3 个 按钮 ,如 图 4-22 所 示 ,可 以 切换 不 同 的 视图 。 图 4-22 三 种 视图 
2. 代码 视图 
新 建 一 个 网 页 文档 , 单 击 “ 代 码 ” 按 钮 ,看 到 网 页 的 代码 ,如 图 4-23 所 示 。 第 1 行 是 一 个 
注释 ,说 明了 网 页 文档 使 用 的 HTML 版 本 ,第 2 行 到 第 10 行 是 网 页 的 HTML 代码 ,其 结 
构 在 3. 3. 3 小 节 中 已 介绍 。 
roe TE ee 
</head> 


</hsml> 


图 4-23 ”代码 视图 


3. 标签 的 属性 
基本 上 每 个 HTML 标签 都 带 有 属性 ,比如 图 4-23 第 4 行 ,content 就 是 meta 二 标签 中 的 
属性 。 一 个 标签 可 以 有 多 个 属性 ,属性 和 标签 名 称 之 间或 者 多 个 属性 之 间 ,都 有 空格 间隔 开 。 


4.5.2 二 meta 二 标签 


二 meta 二 标签 是 HTML 代码 head 区 中 的 一 个 关键 的 标签 , 它 可 用 于 设置 文档 字符 
集 、 使 用 语言 、 网 页 关键 词 等 。 

二 meta 二 标签 是 个 比较 特殊 的 标签 , 它 分 为 两 个 部 分 : 二 meta http-equiv 之 和 所 meta 
name 记 。 下 面 分 别 介绍 这 两 部 分 的 重要 属性 。 

1. 二 meta http-equiv> 

二 meta http-equiv 之 可 用 于 设置 网 页 的 字符 集 和 刷新 时 间 。 

(1) 设置 网 页 的 字符 集 

例如 ,一 meta http-equiv 一 "Content-Type " content 一 "text/html; charset 一 gb_2312" /二 指 
定 当前 网 页 文档 所 使 用 的 字符 集 为 gb_2312, 当 浏览 器 显示 网 页 时 ,将 使 用 中 文 简体 字符 集 
来 显示 网 页 上 的 文本 。 如 果 把 gb_2312 换 成 big5 ,浏览 器 将 使 用 中 文 繁体 字符 集 。 

一 般 网 页 默认 使 用 的 字符 集 是 utf-8, 代 表 使 用 多 个 国家 的 字符 集 , 包 括 中 文 简体 和 繁 
体 。 但 是 utf-8 对 中 文 的 支持 不 是 很 好 ,如 果 网 页 在 浏览 时 发 现 中 文 不 能 正常 显示 ,可 以 考 
虑 把 HTML 代码 二 meta 二 标签 中 的 charset 二 utf-8 改 为 charset 一 gb_2312。 

(2) 设置 网 页 刷新 时 间 

例如 ,二 meta http-equiv 二 "Refresh"” content 二 "5" / 放 ,指定 了 网 页 每 隔 5 秒 刷 新 一 次 。 

2. 二 meta name> 

二 meta name 记 可 用 于 设置 网 页 的 描述 和 关键 字 。 

(1) 设置 网 页 的 描述 

例如 ,二 meta name 二 "description”content 二 "一 个 关于 爱心 的 个 人 网 站 ,发 布 关 于 爱 
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和 温情 的 新 闻 、 文 章 和 美 图 。" / 记 ,description 表示 对 网 页 进行 描述 ,content 中 的 内 容 描述 
网 页 的 简要 情况 。 

(2) 设置 网 页 的 关键 字 

例如 ,二 meta name 二 "keywords”content 二 "网 页 ,三 剑客 ,案例 ” /二 ,keywords 表示 
设置 网 页 的 关键 字 ,content 中 设置 多 个 关键 字 , 每 个 关键 字 用 逗号 分 隔 开 。 

网 页 的 描述 和 关键 字 关 系 到 网 页 在 网 络 上 的 排名 、 网 页 被 网 络 用 户 搜索 到 的 概率 以 及 
用 户 搜索 到 网 页 后 单 击 它 的 概率 。 关 于 搜索 方面 的 知识 ,本 书 不 展开 介绍 ,有 兴趣 的 读者 可 
以 另行 研究 。 
4.5.3 表格 


1. 表格 的 基本 代码 结构 

在 HTML 中 ,表格 的 标签 是 一 table 之 一 /table> ,表格 中 一 行 的 标签 是 一 tr 之 二 /tr> ,一 
个 单元 格 的 标签 是 一 td 过 /td> , 若 用 HTML 编写 一 个 2 行 2 列 的 表格 ,代码 如 图 4-24 所 示 。 

从 上 面 的 代码 可 以 看 到 ,过 tr 二 < 人 tr 二 标签 嵌 套 在 
<table><</table> 中 ,<<td 之 <</td 之 标签 嵌 套 在 二 tr 之 二 /tr> <cry 
中 ,由 此 可 见 HTML 代码 中 标签 嵌 套 的 特点 。 re 

在 代码 中 ,“&.nbsp;” 代 表 空 格 。 在 Dreamweaver 中 创建 一 个 se 
空白 的 表格 , 单 击 编辑 窗口 上 方 的 按钮 ,切换 到 代码 视图 ,可 以 看 到 epeep /re 
表格 对 应 的 HTML 代码 ,在 一 般 情 况 下 ,新 建 的 表格 单元 格 中 都 会 。 </taple> 
出 现 空格 符号 “&.nbsp;”。 

2. 常见 属性 

表格 的 常见 属性 有 以 下 几 种 。 

(1) width, 设 置 表格 或 单元 格 的 宽度 。 

(2) border, 设 置 表格 的 边框 粗细 。 

(3) cellspacing, 设 置 表格 的 间距 。 

(4) cellpadding, 设 置 表格 的 填充 ( 边 距 ) 。 

(5) background, 设 置 表 格 .一 行 或 一 个 单元 格 的 背景 图 像 。 

(6) bgcolor, 设 置 表格 .一行 或 一 个 单元 格 的 背景 颜色 。 

(7) align, 设 置 表 格 在 网 页 中 的 对 齐 方式 或 单元 格 中 内 容 的 对 齐 方式 ,有 3 个 值 可 以 选 
择 : center \left right, 分 别 代 表 居 中 、 靠 左 、 靠 右 。 

(8) height, 设 置 表格 或 单元 格 的 高 度 。 

用 HTML 编写 一 个 表格 并 设置 其 相关 属性 ,代码 如 图 4-25 所 示 。 


<table width="300" border="0" cellspacing="0" cellpadding="0" align="center" > 
<tr align="left" bgcolor="#999999"> 


图 4-24 表格 代码 的 
基本 结构 


<td height="50">Enbsp;</td> 
<td>fnbsp;</td> 
</tr> 
<tr> 
<td height="30">Enbsp;</td> 
<td>gnbsp;</td> 
</tr> 
</table> 


图 4-25 表格 属性 设置 举例 
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4.5.4 图像 和 文本 


1. 图 像 的 标签 和 属性 

图 像 的 标签 是 一 img /二 ,其 常用 属性 有 src、alt、width 和 height。 

(1) src, 用 来 设置 图 像 的 源 文件 。 

(2) alt, 用 来 设置 图 像 的 蔡 代 文本 ,相当 于 图 像 属性 面板 上 的 “替换 ”。 
(3) width ,用 来 设置 图 像 的 宽度 。 

(4) height, 用 来 设置 图 像 的 高 度 。 

用 HTML 编写 图 像 的 相关 属性 ,代码 如 图 4-26 所 示 。 


<img arc="../tuxiang/xiaotubiao new.gif” alt="new 小 图 标 " width="25" height="15" /> 
4-26 图像 标 签 和 基本 属性 


2. 文本 的 标签 

文本 的 相关 标签 主要 有 两 个 ,一 个 是 一 p 之 一 /p>> ,表示 一 个 段落 , 一 个 是 二 br /> , 表 

如 果 希 望 文 本 分 段 或 换行 ,在 编写 HTML 代码 时 必须 使 用 上 面 两 个 标签 ,如 果 直 接 
分 段 或 换行 是 不 会 有 效果 的 。 如 图 4-27 所 示 , 图 4-27(a) 的 做 法 是 错误 的 ,图 4-27(b) 和 
图 4.27(c) 的 做 法 是 正确 的 。 


<body> 

Xbody> <p> 在 萝 中 时 间 不 再 是 直线 </p> 在 末 中 时 间 不 再 是 直 贱 <br /> 
在 末 中 时 间 不 再 是 直线 <p> 到 底 过 去 了 多 久 </p> 到 语 过 去 了 多 久 <br /> 

到 褒 过 去 了 多 入 <py 我 不 知道 cpy 我 不 知道 <bz /> 

我 不 知道 </body> </bcdy> 


</body> 
(a) (b) (9) 
图 4-27 段落 和 换行 标签 的 应 用 
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本 章 首先 介绍 超 链接 的 创建 和 使 用 ,并 制作 个 人 网 站 主页 的 导航 栏 。 其 次 介绍 CSS 样 
式 的 创建 和 使 用 ,并 使 用 CSS 样式 修饰 导航 栏 上 的 超 链接 文本 ; 最 后 介绍 HTML 中 关于 
超 链 接 和 CSS 样式 的 知识 。 

本 章 学 习 要 点 : 

(1) 理解 超 链接 的 作用 

(2) 理解 CSS 的 作用 

(3) 掌握 超 链接 的 创建 和 使 用 

(4) 掌握 CSS 的 创建 和 使 用 

(5) 理解 超 链接 标签 及 其 属性 

(6) 理解 样式 标签 及 其 相关 属性 


5.1 超 链 接 


超 链接 是 网 页 中 一 种 重要 的 元 素 , 它 能 够 让 网 页 与 网 页 之 间 、 网 页 与 其 他 类 型 的 文件 之 
间或 者 多 个 网 站 之 间 ,进行 连接 。 只 有 当 一 个 网 站 中 的 各 个 网 页 链接 在 一 起 之 后 , 才 真 正 构 
成 一 个 网 站 。 可 以 这 样 定义 超 链接 : 它 是 从 一 个 网 页 指向 另 一 个 目标 对 象 的 连接 关系 ,这 
个 目标 对 象 可 以 是 同一 个 网 页 上 的 某 个 位 置 ,也 可 以 是 另 一 个 网 页 或 者 一 个 某 种 类 型 的 文 
件 ( 比 如 图 像 文 件 、Word 文档 ,设置 是 一 个 应 用 程序 文件 ), 还 可 以 是 一 个 邮件 地 址 或 者 一 
个 网 站 地 址 ,甚至 是 一 个 空 链接 。 正 因为 这 种 连接 的 目标 对 象 范围 很 广 ,所 以 才 称 之 为 “ 超 

超 链接 有 一 个 重要 的 特点 , 即 浏览 网 页 的 时 候 ,光标 移 到 超 链接 上 的 时 候 , 一 般 都 会 变 
成 手 的 形状 ,并 且 单 击 超 链接 的 时 候 , 一 般 都 会 打开 一 个 目标 对 象 ,除非 它 是 一 个 空 链接 。 

制作 网 页 的 导航 栏 必须 用 到 超 链 接 。 当 导航 栏 上 的 各 个 栏目 名 称 都 设置 了 超 链接 , 单 
击 它们 时 ,就 可 以 打开 相关 的 对 象 , 看 到 网 站 中 不 同 的 网 页 或 其 他 对 象 ,这 样 导 航 栏 才 真正 
地 起 到 “导航 ”的 作用 。 


5.1.1 创建 起 链接 
1. 源 端点 
超 链接 可 以 设置 在 文字 、 图 像 或 图 像 的 一 部 分 上 ,这 些 可 以 设置 超 链接 的 对 象 叫 做 “ 源 


端点 ”。 创 建 超 链接 的 时 候 ,要 先 选择 源 端 点 ,然后 再 进行 设置 。 
假设 ,要 在 “爱心 屋 ” 的 主页 上 给 导航 栏 上 的 “爱心 美文 "设置 超 链 接 ,那么 “爱心 美文 ”就 
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2. 创建 到 网 页 的 超 链接 

给 “爱心 屋 ” 主 页 导航 栏 上 的 “爱心 美文 "设置 超 链接 的 过 程 如 下 。 

(1) 准备 好 “爱心 美文 "栏目 对 应 的 网 页 。 在 此 之 前 ,已 经 把 它 制作 完成 ,并 且 命 名 为 
axmw. html 。 

(2) 选择 导航 栏 上 的 “爱心 美文 "。 因 为 它 是 一 张 图 像 , 所 以 只 要 用 鼠标 左 键 单 击 它 
即 可 。 

(3) 在 属性 面板 上 找到 “链接 " 栏 (如 果 源 端点 是 文字 ,需要 在 属性 面板 上 单 击 HTML 
后 才能 看 到 ) , 单 击 右 侧 的 第 二 个 小 图 标 一 一 文件 夹 图 标 ,打开 “选择 文件 ”对 话 框 ,在 里 面 找 
到 axmw. html, 选 中 后 再 单 击 “ 确 定 ” 按 钮 。 

这 样 , 超 链接 就 设置 好 了 ,可 以 看 到 “链接 ” 栏 中 显示 了 超 
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链接 的 目标 对 象 axmw. html, 如 图 5-1 所 示 。 注 意 , “链接 ” 栏 

中 显示 的 文件 路 径 ,也 是 一 个 相对 于 当前 网 页 的 相对 路 径 。 [了 | 吏 避 
另外 ,还 有 一 种 设置 链接 的 方法 ,即使 用 “指向 文件 ”图标 i 

岛 ,做 法 如 下 。 


(1) 选择 Dreamweaver 中 的 “窗口 >“ 文件 "命令 ,打开 “文件 "面板 。 

(2) 选择 导航 栏 上 的 “爱心 美文 ”, 再 把 光标 移动 到 “链接 ” 栏 右 侧 的 “指向 文件 ”图标 留 
上 , 拖 动 它 , 让 它 指向 “文件 ”面板 上 axmw. html, 松 开 鼠 标 左 键 ,设置 完成 。 

在 第 二 种 操作 方法 中 ,要 注意 "文件 ”面板 的 打开 方式 。 如 果 在 Dreamweaver 编辑 窗口 
右 侧 面板 组 的 右上 角 显 示 的 图 标 是 国生 .表示 这 时 候 的 面板 组 是 被 * 收 ”起 来 的 状态 。 在 这 
种 状态 下 ,打开 “文件 ”面板 , 拖 动 “指向 文件 ”图 标的 时 候 , 就 会 发 现 “ 文 件 ” 面 板 消 失 了 。 

正确 的 做 法 是 : 先 单 击 国 轩 ,把 面板 组 展开 ,这 时 候 国 国会 交 成 国 。 在 这 种 状态 下 ， 
打开 的 “文件 ”面板 ,就 不 会 消失 。 

创建 超 链接 之 后 ,在 Dreamweaver 的 编辑 窗口 中 不 能 单 击 查看 效果 ,应 该 先 浏览 网 页 ， 
在 浏览 器 窗口 中 单 击 超 链接 后 才能 看 到 目标 对 象 。 

3. 超 链接 的 属性 : 链接 

属性 面板 上 的 “链接 ”属性 用 来 设置 超 链接 的 目标 对 象 。 超 链接 允许 链接 到 各 种 各 样 的 
目标 对 象 ,不 同类 型 的 目标 对 象 设置 方式 是 不 一 样 的 。 

(1) 同一 个 网 页 上 的 某 个 位 置 称 为 锚 点 。 如 果 超 链接 的 目标 对 象 是 这 种 类 型 , 则 称 之 
为 锚 点 链接 。 创 建 这 种 超 链接 ,需要 在 “链接 " 栏 上 输入 “# 锚 点 名 ”。 

(2) 某 一 个 网 页 。 比 如 上 面 的 示例 , 超 链 接 的 目标 对 象 就 是 一 个 网 页 ,这 种 超 链接 是 最 
常见 的 。 创 建 这 种 超 链 ,只 需 通 过 “链接 ” 栏 的 “浏览 文件 "按钮 来 选择 网 页 文件 。 

(3) 一 个 某 种 类 型 的 文件 ,比如 图 像 文 件 或 Word 文档 。 创 建 这 种 超 链接 ,只 需 通 过 
“链接 ” 栏 的 “浏览 文件 ”按钮 来 选择 对 应 的 文件 。 

(4) 一 个 邮件 地 址 。 创 建 这 种 链接 ,需要 在 “链接 ” 栏 输入 “mailto: 邮 件 地 址 ”。 

(5) 一 个 网 站 地 址 。 创 建 这 种 链接 ,需要 在 “链接 ” 栏 输 入 完整 的 网 站 地 址 。 

(6) 一 个 空 链接 。 创 建 这 种 链接 ,只 需 在 “链接 ” 栏 输入 一 个 英文 符号 “#”。 

不 同类 型 的 超 链接 ,将 在 后 面 的 章节 陆续 介绍 。 
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4. 起 链 接 的 属性 : 目标 

属性 面板 上 的 “目标 * 指 的 是 超 链接 的 目标 窗口 , 即 打开 超 链接 的 目标 对 象 时 使 用 的 济 
览 器 窗口 。 在 默认 情况 下 ,目标 对 象 网 页 使 用 的 浏览 器 窗口 与 前 一 网 页 是 同一 个 。 比 如 , 浏 
览 < 爱心 屋 " 主 页 , 单 击 导 航 栏 上 的 “爱心 美文 ", 打 开 axmw. html, 这 时 该 网 页 使 用 的 浏览 器 
窗口 与 先前 的 主页 是 同一 个 ,所 以 ,看 到 axmw. html 的 同时 ,爱心 屋 " 的 主页 是 看 不 到 的 

但 有 时 希望 打开 超 链接 的 目标 网 页 时 ,能 够 重新 打开 一 个 浏览 器 窗口 ,而 不 是 占有 原 有 
网 页 的 窗口 ,这 样 就 能 同时 浏览 原 有 网 页 和 目标 网 页 。 这 样 的 效果 通过 设置 超 链接 的 目标 
窗口 就 能 实现 。 

具体 的 做 法 是 : 选择 超 链 接 的 源 端点 ,在 属性 面板 上 找 [ED 站 
到 * 目 标 ” 栏 ,如 图 5-2 所 示 , 单 击 它 右 侧 的 下 三 角 按钮 ,选择 “请 曾 E 
_blank 选项 ,这 样 就 完成 目标 窗口 的 设置 。 

目标 窗口 的 选项 有 多 个 ,含义 如 下 。 

(1) _blank, 代 表 * 新 窗口 "。 如 果 超 链接 的 “目标 ”设置 为 _blank, 就 表示 打开 这 个 超 链 
接 的 目标 对 象 时 ,将 使 用 一 个 新 的 浏览 器 窗口 。 

(2) _self, 代 表 “ 当 前 窗口 "。 如 果 超 链接 的 “目标 ”设置 为 _self, 就 表示 打开 这 个 超 链接 
的 目标 对 象 时 ,将 使 用 当前 的 浏览 器 窗口 ,这 样 当 前 正在 浏览 的 网 页 就 会 被 福 盖 掉 。 当 “ 目 
标 "不 做 任何 设置 时 ,默认 使 用 的 就 是 _self。 

(3) _parent, 代 表 * 父 窗口 "。 如 果 超 链接 的 “目标 ”设置 为 _parent, 就 表示 打开 这 个 超 
链接 的 目标 对 象 时 ,将 使 用 当前 窗口 的 上 一 层 窗口 。 这 种 情况 一 般 出 现在 框架 集 网 页 中 ,一 
个 浏览 器 窗口 被 分 割 成 多 个 小 窗口 ,其 中 的 任何 一 个 小 窗口 的 父 窗口 就 是 整个 浏览 器 窗口 。 
在 后 面 的 章节 中 介绍 到 框架 集 时 ,将 举例 说 明 。 

(4) _top, 代 表 * 顶 层 窗口 "。 如 果 超 链接 的 “目标 ”设置 为 _top, 就 表示 打开 这 个 超 链接 
的 目标 对 象 时 ,将 使 用 当前 窗口 的 最 顶层 窗口 。 这 种 设置 一 般 出 现在 框架 集中 有 多 层 几 套 
窗口 的 情况 下 ,在 这 里 暂时 不 做 介绍 。 

(5) _new, 代 表 * 新 窗口 ”, 与 _blank 作用 类 似 。 

5. 超 链接 的 属性 : 标题 

超 链接 属性 面板 上 的 “标题 "用 来 设置 一 段 文本 ,浏览 网 页 的 时 候 ,把 光标 移 到 超 链接 
上 ,将 显示 标题 中 设置 的 文本 。 这 个 设置 有 什么 作用 呢 ? 有 时 候 会 碰 到 这 种 情况 想 要 在 
网 页 上 显示 一 段 带 有 超 链接 的 新 闻 标题 ,但 是 标题 太 长 ,而 显示 的 空间 太 窄 , 所 以 只 好 只 显 
示 标 题 的 前 面 一 部 分 ,后 面 就 用 省 略 号 。 这 种 情况 下 ,希望 别人 在 浏览 网 页 的 时 候 ,把 光标 
移 到 新 闻 标题 上 能 够 看 到 完整 的 新 闻 标题 。 要 实现 这 种 效果 ,只 需 把 完整 的 新 闻 标题 文本 
设置 在 “标题 "属性 中 即 可 。 

6. 超 链接 的 属性 : 目标 规则 

如 果 超 链接 的 源 端点 是 文本 ,那么 超 链接 的 属性 中 就 有 一 个 是 “目标 规则 ”"。 目 标 规则 
用 来 设置 一 个 CSS 样式 ,该 样式 用 来 修饰 当前 带 有 超 链接 的 文本 。 


5.1.2 更 新 和 删除 起 链接 


1. 更 新 超 链 接 
有 了 时候 , 超 链接 中 设置 的 目标 对 象 可 能 被 重 命名 或 者 被 改变 存放 的 位 置 ,这 些 变 化 有 可 


5-2 目标 属性 
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能 导致 超 链接 不 正常 。 比 如 ,打开 “爱心 屋 ” 在 硬盘 上 的 根 目 录 , 找 到 axmw. html, 将 它 重 命 
名 为 aixinmeiwen. html, 然 后 再 浏览 “爱心 屋 ” 的 主页 , 单 击 超 链接 后 会 发 现 , 超 链 接 的 目标 
对 象 浏览 不 了 了 。 因 为 ,这 时 超 链接 的 目标 对 象 仍然 是 axmw. html, 所 以 自然 就 找 不 到 目 
标 对 象 了 。 如 果 不 是 重 命名 ,而 是 把 axmw. html 的 存放 位 置 改变 一 下 ,也 将 导致 超 链接 目 
标 对 象 打 不 开 , 因 为 在 “链接 " 栏 中 设置 的 是 目标 对 象 与 当前 网 页 的 相对 位 置 ,如 果 目 标 对 象 
挪动 位 置 了 , 它 与 当前 网 页 的 相对 位 置 也 应 该 修改 ,否则 单 击 超 链接 的 时 候 ,就 会 因 找 不 到 
而 打 不 开 目标 对 象 。 

那么 ,如 果 确 实 需要 修改 某 个 网 页 的 名 字 或 挪动 它 的 位 置 ,而 这 个 网 页 又 是 某 个 超 链 接 
的 目标 对 象 ,怎么 做 才能 保证 超 链接 正常 呢 ? 

正确 的 做 法 是 : 在 “文件 ”面板 中 执行 修改 操作 。 但 是 ,很 重要 的 前 提 是 已 经 在 
Dreamweaver 中 创建 了 网 站 的 站 点 。 

假设 需要 修改 axmw. html 的 名 字 , 在 Dreamweaver 中 打开 “文件 ”面板 ,在 “站 点 -爱心 
屋 ”" 下 找到 axmw. html, 右 击 ,选择 “编辑 ”一 “ 重 命名 ”命令 ,输入 新 的 名 字 aixinmeiwen. 
html, 然 后 按 Enter 键 确定 ,这 时 会 弹出 一 个 “更 新 文件 ”对 话 框 ,如 图 5-3 所 示 , 询 问 是 否 更 
新 文件 链接 , 单 击 “更 新 "按钮 ,这 样 就 能 确保 与 axmw. html 文件 相关 的 链接 随 之 更 新 ,从 而 
保持 正常 。 


更 新 以 下 文件 的 渤 按 吗 ? 
Jwangyef index, htm 未 更 新 


图 5-3 ”提示 更 新 链接 信息 


如 果 需 要 改变 文件 的 存放 位 置 , 也 应 该 在 “文件 ”面板 中 操作 。 在 “文件 ”面板 中 找到 文 
件 , 拖 动 它 到 目标 目录 下 ,然后 松 开 鼠标 左 键 ,如 果 出 现 “ 更 新 文件 ”对 话 框 ,同样 单 击 “ 更 新 ” 
按钮 即 可 。 

事实 上 , 重 命 名 和 改变 存放 位 置 这 两 个 操作 ,不 管 是 对 网 页 ,还 是 对 网 站 中 其 他 类 型 的 
文件 ,都 应 该 在 “文件 ”面板 中 的 站 点 下 执行 ,这 样 能 够 确保 与 之 相关 的 超 链接 随 之 更 新 , 保 
持 正常 。 

2. 删除 超 链接 

删除 超 链接 的 操作 很 简单 ,只 需 把 超 链接 的 源 端点 选 证 访 WE 
中 ,然后 在 属性 面板 上 找到 “链接 ” 栏 ,如 图 5-4 所 示 ,把 栏 中 i 而 忆 
的 内 容 选 中 , 按 Delete 键 , 将 它 删 除 , 这 样 超 链接 就 被 删 ER 
除了 。 图 5-4 删除 超 链 接 
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5.1.3 热点 链接 


上 面 所 创建 的 超 链接 , 源 端 点 使 用 的 是 一 张 图 像 。 源 端点 可 以 是 文字 、 图 像 或 图 像 的 一 
部 分 。 

在 “爱心 屋 ” 的 主页 上 ,如 果 导 航 栏 没有 切割 成 一 张 张 的 小 图 像 , 而 是 一 整个 导航 栏 就 是 
一 张 图 像 ,如 图 5-5 所 示 , 那 么 如 何在 这 张 图 像 上 ,对 “爱心 美文 "设置 超 链接 呢 ? 


DN 广 。 这 RR 到 zz 


5-5 ”导航 栏 


使 用 “热点 "工具 ,可 以 为 图 像 上 的 某 一 个 部 分 设置 超 链接 。“ 热 点 "工具 在 图 像 属 性 面 
板 的 左下 角 , 如 图 5-6 所 示 。“ 热 点 ”工具 有 三 类 : 矩形 热点 问 、 圆 形 


地 国 @[ ] 

热点 问 多边形 热 点 巴 。 ROLY 

使 用 “热点 "工具 创建 的 超 链接 也 叫做 “热点 链接 ”, 创 建 热点 链接 图 5.6 热点 工具 
的 步骤 如 下 。 


(1) 需要 把 上 述 的 整 张 图 像 选 中 。 

(2) 根据 实际 需要 , 单 击 属性 面板 左下 角 的 某 个 热点 工具 (这 里 选用 的 是 矩形 热点 工 
具 ) ,这 时 光标 会 变 成 十 字形 状 ; 在 图 像 上 , 拖 动 鼠 标 画 出 一 个 蓝 色 的 热点 ,覆盖 需要 创建 超 
链接 的 部 分 , 松 开 鼠标 左 键 ,热点 创建 完成 。 

(3) 在 “热点 "属性 面板 上 (如 图 5-7 所 示 ) 设 置 “ 链 接 " 和 “目标 ”, 完 成 热点 链接 的 创建 。 


热点 链接 员 ) 区 BD 
目标 四 | v BAD | | 


5-7 热点 链接 的 属性 


如 果 需 要 拖 动 或 删除 蓝 色 的 热点 块 ,只 须 单 击 它 , 然 后 拖 动 或 按 Delete 键 删 除 。 

如 果 需 要 修改 热点 链接 ,也 需要 单 击 它 , 才 能 出 现 “ 热 点 "属性 面板 ,然后 在 属性 面板 上 
修改 。 

注意 :“ 热 点 ”工具 属于 图 像 属性 面板 ,所 以 必须 先 选 择 图 像 才能 找到 它们 。 


< 任务 5.1 


内 容 : 
(1) 在 个 人 网 站 主页 上 设置 第 一 个 栏目 与 对 应 子 页 的 超 链接 。 
(2) 创建 个 人 网 站 的 其 他 栏目 对 应 的 子 页 ,并 在 主页 导航 栏 上 为 各 个 栏目 设置 超 链 接 。 


5.2 CSS 样式 


CSS(Cascading Style Sheet, 级 联 样式 表 ) 也 称 为 “风格 样式 表 ” 或 “ 层 释 样式 表 ” ,实质 
上 就 是 用 来 修饰 网 页 外 观 的 样式 代码 , 它 可 以 被 嵌入 到 网 页 的 HTML 代码 中 ,只 作用 于 
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某 一 个 网 页 ,也 可 以 被 保存 到 一 个 独立 的 样式 文件 中 供 多 个 网 页 使 用 。 

使 用 CSS 可 以 修饰 网 页 上 的 文字 、 图 像 表格、 超 链接 、 网 页 背景 等 。 事实 上 ,在 介绍 文 
字 添 加 的 时 候 ,已 经 使 用 过 CSS 来 修饰 文字 。 现 在 ,正式 地 介绍 一 下 CSS 的 创建 .应 用 、 修 
改 和 删除 。 


5.2.1 创建 CSS 


选择 Dreamweaver 中 的 “窗口 ”>“CSS 样式 ”命令 ,打开 “CSS 样式 ?面板 。 选 择 面板 中 
的 “全 部 ”选项 卡 ,可 以 看 到 当前 已 经 存在 的 CSS 样式。 比如 图 5-8 中 ,显示 当前 存在 两 个 样 
式 : .tdl 和 . wbl1。 这 两 个 样式 的 代码 ,在 网 页 的 代码 视图 可 以 查看 到 ,如 图 5-9 所 示 。 


5 [地 元 素 | 文件 | 资源] 二 
[ <atyle type="text/caa"> 
全 部 | 当前 le yper text/ess 
所 有 规则 background-image: url(../tuxiang/index_r11_c9.jpg); 
ee } 
-tdl 
Ea -wbl [ 半 
font-family: “宋体 "; 
font-size: 10pt; 
color: #FFF; 
} 
/atyle> 
图 5-8 “CSS 样式 ”面板 图 5-9 样式 代码 


要 创建 一 个 新 的 CSS 样式 ,除了 第 4 章 中 介绍 的 在 属性 面板 上 的 添加 方式 ,还 可 以 通 
过 “CSS 样式 "面板 来 添加 。 单 击 “CSS 样式 ?面板 下 方 的 “新 建 CSS 规则 ?按钮 基 ,弹出 “新 
建 CSS 样式 "对 话 框 ,通过 相关 的 设置 ,同样 可 以 新 建 一 个 CSS 样式 。 

在 “新 建 CSS 规则 ?对 话 框 中 ,需要 设置 选择 器 类 型 .选择 器 名 称 和 规则 定义 ,下 面 来 了 
解 这 些 选 项 的 具体 含义 。 

1. 选择 器 类 型 

(1) 类 (可 应 用 于 任何 HTML 元 素 ): 这 种 类 型 的 样式 需要 自行 设置 选择 器 名 称 ,创建 
之 后 ,可 以 用 来 修饰 网 页 上 的 任何 对 象 。 

(2) ID( 仅 应 用 于 一 个 HTML 元 素 ): 网 页 上 的 对 象 ,一 般 都 可 以 设置 ID( 比 如 选择 网 
页 上 的 一 个 图 像 ,在 属性 面板 上 即 可 看 到 它 的 ID 属性 ) ,每 个 ID 只 代表 一 个 对 象 。 创 建 ID 
类 型 的 CSS 样式 ,不 能 自行 设置 选择 器 的 名 称 ,而 是 需要 输入 网 页 上 某 个 对 象 的 ID ,这 样 创 
建 出 来 的 样式 就 只 作用 于 这 个 ID 所 代表 的 那个 对 象 。 

(3) 标签 (重新 定义 HTML 元 素 ): 这 种 类 型 的 样式 用 来 修饰 某 一 种 标签 代表 的 对 象 ， 
在 设置 的 时 候 , 需 要 从 选择 器 名 称 的 下 拉 列 表 中 选择 一 个 标签 。 比 如 ,如 果 选 择 器 名 称 是 
img ,就 表示 创建 出 来 的 样式 将 自动 应 用 在 网 页 的 所 有 图 像 上 。 

(4) 复合 内 容 (基于 选择 的 内 容 ): 这 种 类 型 的 样式 可 应 用 于 多 种 类 型 的 网 页 对 象 , 具 
体 情 况 视 选择 器 名 称 而 定 。 当 选择 创建 “复合 内 容 ” 的 CSS 样式 时 ,也 无 须 输 入 选择 器 名 
称 , 而 是 要 从 选择 器 名 称 的 下 拉 列 表 中 选取 。 比 如 选取 的 是 “table tr td”, 就 表示 创建 的 样 
式 将 自动 应 用 在 网 页 的 所 有 表格 ` 行 和 单元 格 上 。“ 复 合 内 容 ? 类 型 的 样式 ,常用 于 修饰 带 有 
超 链接 的 文字 。 

2. 选择 器 名 称 

选择 器 名 称 其 实 就 是 样式 的 名 称 。 创 建 不 同类 型 的 样式 ,对 选择 器 名 称 的 要 求 不 同 。 
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(1) 创建 “类 ”样式 ,需要 自行 输入 选择 器 名 称 , 且 名 称 必须 以 英文 字母 或 句点 (英文 输 
入 法 中 的 ) 开 头 , 不 可 以 包含 空格 或 其 他 标点 符号 。 如 果 输 
入 的 名 称 不 符合 规则 要 求 ,比如 输入 12, 那 么 单 击 “ 确 定 ” 按 
钮 的 时 候 , 会 弹出 一 个 警告 对 话 框 ,如 图 5-10 所 示 。 

(2) 创建 “ID” 样 式 ,输入 的 选择 器 名 称 应 该 是 网 页 上 存 一 
在 的 某 个 对 象 的 ID ,具体 格式 是 “#ID?”。 

(3) 创建 “标签 "样式 ,选择 器 名 称 不 需要 输入 ,而 是 从 图 5-10 警告 对 话 框 


Dreanveaver 


A 


列表 中 选择 。 
(4) 创建 “复合 内 容 ” 样 式 ,选择 器 名 称 也 是 从 列表 中 选择 。 
3. 规则 定义 


规则 定义 有 两 个 选项 :“ 仅 限 该 文档 ”和 * 新 建 样式 表 文 件 ”。 如 果 选 择 “ 仅 限 该 文档 ” 选 
项 ,所 创建 的 样式 只 作用 于 当前 正 编辑 的 网 页 ,样式 代码 将 被 嵌入 到 该 网 页 的 HTML 代码 
中 ,其 他 网 页 不 能 使 用 这 个 样式 。 如 果 选 择 “ 新 建 样式 文件 ”选项 ,所 创建 的 样式 将 以 一 个 独立 
文件 的 形式 保存 ,样式 的 代码 将 被 写 人 到 该 文件 中 ,这 样 所 有 的 网 页 都 可 以 使 用 到 这 个 样式 。 

如 果 之 前 已 经 创建 过 样式 表 文 件 ,那么 在 规则 定义 的 选项 中 ,还 会 出 现 这 些 样式 表 文 件 的 
名 字 。 如 果 选 择 了 某 个 样式 表 文 件 ,就 表示 要 把 新 建 的 CSS 样式 保存 到 该 样式 表 文件 中 。 

在 第 4 章 中 ,创建 了 “ 仅 限 该 文档 ”的 类 样式 ,现在 假设 要 在 “爱心 屋 ” 网 站 中 创建 一 个 所 
有 网 页 都 可 以 使 用 的 类 样式 ,具体 步骤 如 下 。 

(1) 在 Dreamweaver 中 打开 “爱心 屋 ” 网 站 的 任何 一 个 网 页 (如 打开 index. htm) ,再 打 
开 “CSS 样式 ”面板 。 

(2) 单 击 “ 新 建 CSS 规则 ”按钮 妇 ,在 选择 器 类 型 中 选择 “类 (可 应 用 于 任何 HTML 元 
素 )” 选 项 ,在 选择 器 名 称 中 输入 一 个 名 称 , 如 “zhengwen”, 在 规则 定义 中 选择 “新 建 样 式 表 
文件 ”选项 ,再 单 击 “ 确 定 ” 按 钮 。 

(3) 弹出 “将 样式 表 文 件 另存 为 "对话 框 ,如 图 5-11 所 示 , 选 择 要 保存 样式 表 文件 的 文 
件 夹 , 双 击 它 进 入 其 中 。 如 果 没 有 对 应 的 文件 夹 , 可 以 单 击 对 话 框 中 的 “创建 新 文件 夹 ”按钮 
[ ,创建 一 个 新 的 文件 夹 (在 这 个 例子 中 新 建 的 文件 夹 是 “CSS 样式 ”) ,然后 在 “文件 名 ”中 


将 样式 表 文件 另存 为 


文件 各 如 ;文本 衬 习 
保 部 并 0 样式 下 妇 件 eco 


5-11 “将 样式 表 文件 另存 为 ”对话 框 
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输入 样式 表 文 件 的 名 称 (在 这 个 例子 中 是 “文本 样式 ”)。 注 意 ,这 时 保存 下 来 的 文件 类 型 是 
样式 表 文件 ,扩展 名 是 . css。 

(4) 弹出 “CSS 规则 定义 ”对 话 框 ,根据 实际 需要 ,在 “分 类 ”中 选择 “类 型 "选项 ,然后 , 设 
置 Font-family、Font-size 和 Color 分 别 为 宋体 、10pt 和 黑色 。 

完成 之 后 ,可 以 在 “CSS 样式 ”面板 中 看 到 “文本 样式 . css”， 
单 击 它 前 面 的 加 号 展开 该 样式 表 , 就 能 看 到 刚刚 创建 的 样式 
zhengwen。 同 时 ,在 “文件 ”面板 的 CSS 样式 文件 夹 中 ,也 能 
找到 该 样式 表 文 件 , 如 图 5-12 所 示 , 双击 打开 它 , 能 看 到 
zhengwen 样式 的 代码 。 

注意 : 如 果 是 在 打开 样式 表 文 件 的 情况 下 新 建 CSS 样 
式 , 并 选择 “ 仅 限 该 文档 ”选项 ,那么 新 建 的 样式 将 被 保存 到 
当前 打开 的 样式 表 文 件 中 。 

下 面 介 绍 如 何在 各 个 网 页 中 应 用 样式 表 文 件 中 的 样式 。 


5.2.2 应 用 CSS 


应 用 CSS 样式 有 两 种 方式 : 一 种 是 选择 套用 , 另 一 种 是 自动 应 用 。 应 用 样式 表 文 件 中 
的 样式 需要 两 个 步骤 : 附加 样式 表 和 选择 套用 。 

1. 附件 样式 表 和 选择 套用 

(1) 附加 样式 表 

在 Dreamweaver 中 ,打开 要 应 用 样式 的 网 页 , 单 击 *CSS 样式 ”面板 下 方 的 “附件 样式 
表 "按钮 克 ,打开 “链接 外 部 样式 表 ” 对 话 框 ,如 图 5-13 所 示 , 单 击 “浏览 ”按钮 ,选择 样式 表 
文件 ,然后 单 击 "确定" 按钮。 确定 后 ,对 话 框 关闭 ,这 时 可 以 看 到 ,“CSS 样式 ”面板 上 出 现 
了 样式 表 文 件 的 名 字 , 单 击 它 前 面 的 加 号 可 以 看 到 定义 在 其 中 的 样式 。 


图 5-12 “文件 ”面板 


链接 外 部 样式 表 


文件 /URLGE): |. /Css 样式 /文本 样式 . css 司 [a 
添加 为 : @ 链接) 
OSN\D 


操 体 加 :| 
您 也 可 以 输入 到 号 分 隔 的 媒 件 类 型 列表 。 


Jreanweaver 的 范例 样式 表 可 以 帮助 修 起 步 。 


图 5-13 “链接 外 部 样式 表 ” 对 话 框 


(2) 选择 套用 

选择 套用 的 做 法 在 第 4 章 使 用 过 : 先 把 网 页 上 要 修饰 的 对 象 选中 ,然后 右 击 “样式 ” 面 
板 中 的 某 个 样式 ,在 弹出 菜单 中 选择 “套用 ”选项 即 可 。 

使 用 上 述 的 两 个 步骤 ,可 以 实现 将 “文本 样式 . css” 文 件 中 定义 的 zhengwen 样式 应 用 到 
“爱心 屋 ” 的 各 个 网 页 中 。 

2. 自动 应 用 

哪些 样式 是 自动 应 用 的 呢 ? 在 四 种 类 型 的 CSS 样式 中 ,除了 第 一 种 “类 ”样式 ,其 他 三 
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种 样式 都 是 自动 应 用 的 。 也 就 是 说 ,如 果 创 建 的 是 ID 样式 ,标签 样式 或 复合 内 容 样式 ,创建 
之 后 不 需要 选择 应 用 的 对 象 , 这 些 样 式 一 旦 创建 ,就 会 自动 作用 在 网 页 对 应 的 对 象 上 。 

关于 样式 自动 应 用 ,通过 一 个 ID 类 型 的 样式 来 进行 说 明 。 

(1) 选择 网 页 上 的 一 个 图 像 ,把 它 的 ID 设置 为 txl。 

(2) 新 建 一 个 CSS 样式 ,选择 ID 类 型 ,在 选择 器 名 称 中 输入 txl, 在 规则 定义 中 选择 
“ 仅 限 该 文档 ”按钮 ,然后 单 击 “ 确 定 ” 按 钮 。 

(3) 在 “CSS 规则 定义 ”对 话 框 “分 类 ”中 选择 “边框 ”选项 ,然后 在 右 侧 的 Top 中 选择 
dotted 选项 ,在 Color 中 选择 某 个 颜色 。 

(4) 单 击 “ 确 定 ” 按 钮 ,将 看 到 ID 为 txl 的 图 像 自动 加 上 了 一 个 有 颜色 的 虚线 边框 ,这 
说 明 , 刚 刚 创建 的 ID 类 型 的 样式 自动 作用 在 对 应 的 对 象 上 了 。 

在 后 面 CSS 与 超 链接 的 介绍 中 ,还 将 看 到 CSS 样式 自动 应 用 的 例子 。 


5.2.3 修改 和 删除 CSS 


1. 修改 CSS 

双击 “样式 ”面板 中 的 某 个 样式 ,可 以 打开 “CSS 规则 定义 ”对 话 框 ,对 样式 进行 属性 的 
重新 设置 或 添加 新 的 属性 。 或 者 在 “样式 ”面板 中 单 击 选 中 某 个 样式 ,然后 单 击 “ 样 式 ” 面 板 
下 方 的 “编辑 样式 "按钮 请 ,也 可 以 打开 “CSS 规则 定义 ”对 话 框 。 

如 果 只 是 需要 修改 样式 中 已 有 属性 的 值 ,可 以 直接 在 “ 样 re 
式 ” 面 板 下 方 的 属性 面板 (注意 ,不 是 平常 使 用 的 属性 面板 ) 中 富国 和 3 
修改 ,如 图 5-14 所 示 。 地 

当 在 “样式 ?面板 中 选择 某 个 样式 ,下 方 样式 的 属性 面板 
就 出 现 样式 的 已 有 属性 列表 , 左 侧 是 属性 的 名 字 , 右 侧 是 属性 
的 值 。 单 击 属性 值 ,就 可 以 对 它 进行 修改 。 

2. 删除 CSS 

删除 CSS 样式 ,有 以 下 几 种 方式 。 

(1) 在 “样式 ”面板 上 选择 某 个 样式 , 按 Delete 键 。 

(2) 在 “样式 ”面板 上 选择 某 个 样式 ,再 单 击 “样式 ?面板 下 方 的 “删除 CSS 规则 ” 按 


图 5-14 样式 的 属性 面板 


钮 面 

(3) 在 “样式 ”面板 上 右 击 某 个 样式 ,在 弹出 的 菜单 上 选择 “删除 ”菜单 项 。 

(4) 打开 样式 表 文 件 或 网 页 的 代码 视图 ,找到 样式 对 应 的 代码 ,把 它 删除 。 

修改 了 某 个 样式 之 后 ,每 一 个 使 用 了 该 样式 的 网 页 ,都 会 发 生 相应 的 变化 。 比 如 把 样式 

zhengwen 的 文字 颜色 属性 由 黑色 改 为 白色 ,就 会 发 现 ,与 之 相关 的 网 页 上 的 文字 都 会 统一 
由 此 可 见 , 在 多 个 网 页 中 应 用 同一 个 CSS 样式 , 既 能 减少 工作 量 ,又 能 够 使 网 页 保持 外 

观 风格 的 统一 。 


< 任务 5.2 


内 容 : 创建 一 个 用 来 修改 网 页 上 正文 的 样式 ,并 把 它 保 存 到 一 个 样式 表 文 件 中 ,然后 在 
各 个 网 页 上 ,通过 附加 样式 表 应 用 这 个 样式 修饰 文字 。 
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5.3 CSS 样式 与 超 链 接 


5.3.1 起 链接 文本 的 默认 样式 


CSS 样式 经 常用 来 修饰 带 有 超 链 接 的 文本 (简称 “ 超 链 接 文本 ”)。 先 来 看 看 超 链 接 文 
本 的 默认 外 观 。 

首先 ,在 “爱心 屋 ” 主 页 上 的 “爱心 美文 "模块 ,给 每 个 文章 标题 都 设置 超 链接 (比如 设置 
为 空 链接 ); 然后 , 按 F12 键 浏览 网 页 效果 。 可 以 看 到 ,每 个 带 超 链接 的 文本 都 加 了 下 划 线 ， 
并 且 颜 色 变 成 蓝 色 。 单 击 超 链 接 之 后 ,被 单 击 过 后 的 文本 变 成 了 紫色 ,如 图 5-15 所 示 。 这 
两 种 颜色 的 变化 主要 是 因为 操作 系统 默认 的 设置 而 产生 的 。 


more... 爱心 美文 


图 5-15 超 链接 文本 的 默认 样式 
通过 “复合 内 容 ” 类 型 的 CSS 样式 可 以 改变 超 链接 文本 的 外 观 。 
5.3.2 起 链接 文本 的 CSS 样式 


用 来 修饰 超 链接 的 CSS 样式 有 4 个 ,分 别 介绍 如 下 。 

(1) a:link, 用 来 设置 超 链接 文本 起 始 状 态 下 的 外 观 。 

(2) a:visited, 用 来 设置 超 链接 文本 被 单 击 过 后 的 外 观 。 

(3) a:hover, 用 来 设置 超 链 接 文本 在 悬 停 状态 下 的 外 观 , 光 标 移 到 文本 上 叫做 悬 停 

(4) as:active, 用 来 设置 正在 打开 目标 对 象 时 超 链 接 文本 的 外 观 。 

这 4 种 外 观 中 最 后 一 种 状态 一 般 不 容易 被 察觉 ,所 以 常常 只 设置 前 3 种 状态 的 外 观 。 
具体 设置 方式 如 下 。 

(1) 设置 a:link。 首 先 , 新 建 CSS 样式 ,选择 器 类 型 选择 “复合 内 容 ”, 在 选择 器 名 称 中 
选择 a:link, 根 据 需 求 选择 规则 定义 。 然 后 ,在 “CSS 规则 定义 ”对 话 框 中 设置 Font_family、 
Font_size 和 Color 等 属性 。 如 果 要 去 掉 下 划 线 ,在 Text_decoration 中 选择 none 选项 。 

(2) 设置 a:visited。 首 先 ,新 建 CSS 样式 ,选择 器 类 型 选择 “复合 内 容 ”, 在 选择 器 名 称 
中 选择 a: visited, 根 据 需 求 选择 规则 定义 。 然 后 ,在 “CSS 规则 定义 ”对 话 框 中 设置 Font_ 
family、Font_size 和 Color 等 属性 。 一 般 这 些 属性 设置 跟 a:link 中 设置 的 相同 ,因为 很 多 时 
候 浏览 器 不 能 正确 地 区 分 超 链接 是 否 被 单 击 过 ,所 以 把 a:visited 和 a:link 设置 为 一 样 ,就 
无 须 区 分 了 。 

(3) 设置 a:hover。 首 先 ,新 建 CSS 样式 ,选择 器 类 型 选择 “复合 内 容 ”, 在 选择 器 名 称 
中 选择 a:hover, 根 据 需求 选择 规则 定义 。 然 后 ,在 “CSS 规则 定义 ”对 话 框 中 设置 Font_ 
family、Font_size 和 Color 等 属性 。 这 些 属性 的 设置 应 该 跟 a:link 中 设置 的 不 同 ,这 样 当 光 
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标 移 到 超 链 接 文 本 上 时 ,文本 才 会 发 生变 化 。 如 果 要 加 上 下 划 线 ,在 text_decoration 中 选 
择 underline 选项 。 


设置 了 超 链接 的 CSS 样式 之 后 ,不 需要 选 定 样式 进行 套用 ,样式 的 效果 会 自动 应 用 到 
网 页 的 超 链接 文本 上 。 

假设 , 超 链接 的 CSS 样式 定义 结果 如 图 5-16 所 示 ,那么 网 页 浏览 时 , 超 链接 文本 的 起 始 
外 观 和 悬 停 外 观 分 别 如 图 5-17 和 图 5-18 所 示 。 


alink 
ayisited 
ahoyer :he 
日 文本 样式 . css 日 文本 样式 . css 
上 ,zhengyen 上 L .zhsngwen 
“a:link” 的 尾 性 “a:visited” 的 尾 性 
color 口 cc ee CCC color terr 
font-fanily “宋体 font-fanily “宋体 ” font-fanily “宋体 ” 
font-size 10pt font-size 10pt font-size pt 
text-decora. .. none text-decora. .. none text-decora. .. underline 


5-16 ” 超 链接 CSS 样式 示例 


图 5-17 示例 中 超 链接 文本 的 起 始 外 观 


拥有 这 样 的 情怀 


5-18 示例 中 超 链接 文本 的 悬 停 外 观 


5.3.3 自 定 义 的 超 链 接 文本 样式 


一 般 , 在 同一 个 网 页 中 ,所 有 的 超 链接 文本 使 用 同样 的 CSS 样式 ,所 以 外 观看 上 去 是 一 
样 的 ,它们 的 悬 停 状 态 也 是 一 样 的 。 如 果 在 同一 个 网 页 中 , 想 让 不 同 的 超 链接 文本 呈现 不 同 
的 外 观 ,那么 就 需要 自 定义 超 链 接 文本 样式 。 

现在 ,假设 在 “爱心 屋 ” 的 主页 (index2. htm) 中 ,要 求 导航 栏 上 的 超 链 接 文本 与 “爱心 美 
文 ”模块 中 的 超 链 接 文本 外 观 不 同 , 定 义 CSS 样式 的 步 又 如 下 。 


(1) 找到 之 前 定义 的 a: link、a: visited、a: hover 样式 代码 ,如 图 5-19 所 示 , 复 制 这 段 
代码 。 


(2) 修改 这 段 代码 ,分别 在 a:link、a:visited 和 a:hover 中 的 a 后面 加 上 一 个 英文 句点 
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符号 和 同一 个 名 称 ,比如 “. link1”, 如 图 5-20 所 示 。 


a-linkl:link { 


ont-family; “宋体 ": font-family: "宋体 "; 
font-size: 10pt; fonr-size: 10pt; 
color: #CCC; color: #CCC; 


text-decoration: none; text-decoration: none; 

} 

a.linkl:visited { 

-fe font-family: "宋体 "; 

fonc-size: 10pt; fonr-aize: 10pr; 

color: #CCC; color: #CCC; 
text-decoration: none; 


text-decoration: none; 


hover a.linkl:hover { 
font-family: "宋体 "; font-family: "宋体 "; 
font-size: 10pr: fonr-aize: 10pt; 
color: #FFF; color: #FFF; 
text-decoration: underline; text-decoration: underline; 


} 


图 5-19 示例 中 超 链接 样式 的 代码 图 5-20 自 定义 超 链接 样式 1 


(3) 在 这 段 代 码 的 后 面 ,粘贴 刚才 复制 的 代码 ,并 修改 这 段 代 码 , 分 别 在 a: link、 
asvisited 和 a:hover 中 的 a 后 面 加 上 一 个 英文 句点 符号 和 .1352:1inx | 


同一 个 名 称 ,比如 “link2.”, 如 图 5-21 所 示 。 这 时 ,在 “CSS 人 ee 

样式 ”面板 上 能 够 看 到 a. link2: link、a。 link2: visited 和 es dia 

a。 link2:hover 样式 。 通 过 “样式 ”面板 下 方 的 属性 面板 , 修 at 人 
onr-fanily: "宋体 "; 


改 alink2 :link 、a。 link2:visited 和 a。 link2:hover 样式 的 font-size: 10pt; 


color: #030; 


属性 值 ,让 它们 区 别 于 a. linkl1: link、a，linkl1: visited 和 : vext-decoretion: underline; 
alinkl :hover 样式 。 人 


(4) 切换 到 设计 视图 ,在 主页 中 选择 "爱心 美文 "模块 中 Si 
的 各 个 超 链 接 文本 ,然后 单 击 属性 面板 上 的 CSS 按钮 ,在 * 目 y text-decoration: underline; 
标 规则 ”中 选择 inkl' 选择 导航 栏 上 的 各 个 超 链接 文本 ,在 图 531 自 定义 地 链接 样式 3 
“目标 规则 "中 选择 link2。 这 样 ,导航 栏 上 的 超 链接 文本 与 
“爱心 美文 "模块 中 的 超 链接 文本 外 观 就 不 相同 了 ,如 图 5-22 所 示 。 


爱心 美文 


5-22 一 个 网 页 应 用 多 个 超 链接 样式 


CSS 样式 还 有 其 他 方面 的 应 用 ,比如 把 鼠标 指针 的 默认 外 观 箭头 改变 为 其 他 形状 。 现 
在 市 场 上 流行 的 网 页 布局 方式 div 十 CSS, 也 是 CSS 样式 的 一 种 主要 应 用 。 有 兴趣 的 读者 可 
以 再 做 研究 ,本 书 不 展开 介绍 。 
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内 容 : 

(1) 如 果 开 发 的 个 人 网 站 主页 上 ,导航 栏 的 各 个 标题 都 是 文本 类 型 的 ,使 用 CSS 样式 为 
这 些 带 有 超 链接 的 标题 文本 设置 不 同 的 外 观 。 

(2) 检查 所 负责 的 个 人 网 站 ,完善 主页 和 每 个 子 页 的 内 容 , 对 文本 都 使 用 CSS 样式 进行 
修饰 ,并 且 检 查 主页 到 各 个 子 页 的 链接 是 否 都 有 设置 。 


5.4 关于 HTML: 超 链 接 和 CSS 样式 


5.4.1 起 链接 


1. 标签 及 属性 

超 链接 在 HTML 中 对 应 的 标签 是 二 a 二 二 /a 二 ,该 标签 常用 的 基本 属性 有 href target、 
class \title。 

href 用 来 设置 超 链接 的 目标 对 象 , 它 的 值 对 应 网 页 设计 视图 下 属性 面板 上 “链接 ” 栏 
的 值 。 

target 用 来 设置 超 链 接 的 目标 窗口 , 它 的 值 对 应 网 页 设计 视图 下 属性 面板 上 “目标 ” 栏 
的 值 。 

class 用 来 设置 超 链接 的 CSS 样式 , 它 的 值 对 应 网 页 设计 视图 下 属性 面板 上 “目标 规则 ” 
栏 的 值 。 

title 用 来 设置 超 链接 的 标题 , 它 的 值 对 应 网 页 设计 视图 下 属性 面板 上 “标题 " 栏 的 值 。 

2. 使 用 方法 

使 用 超 链接 标签 的 时 候 , 超 链接 的 源 端 点 应 该 放 在 二 a 二 和 二 /a 二 之 间 , 举 例如 下 。 

示例 一 : 以 “爱心 风景 "4 个 字 为 源 端点 ,以 .. /wangye/axfj. html 为 目标 对 象 ,要 求 在 
新 窗口 打开 目标 对 象 ,并 且 使 用 CSS 样式 link_ys 修饰 超 链接 文本 。 

HTML 代码 写法 如 下 : 


<a href = " . . /wangye/axfj. html" target = "_ blank" class = "link_ys"> 爱 心 风景 </a> 


示例 二 : 以 图 像 ( 相 对 路 径 为 . . /tuxiang/more. jpg) 做 源 端点 ,以 .. /wangye/axfi. html 
为 目标 对 象 ,要 求 指向 超 链接 时 显示 “点 击 查 看 更 多 ”。 
HTML 代码 写法 如 下 : 


<a href = ".. /wangye/axfj. html" title= "点 击 查看 更 多 "> < img src=".. /tuxiang/more. jpg " /> 
</a> 


5.4.2 CSS 样式 


1. 二 style 二 标签 
在 HTML 中 ,二 style 二 标签 用 于 定义 样式 。 二 style 二 标签 是 成 对 出 现 的 , 写 为 
< 所 style> 所 /style>>。 这 对 标签 应 该 放 在 HTML 代码 的 文档 头 部 分 ,也 就 是 放 在 
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二 head 记 二 /head 二 标签 中 间 。 
二 style 二 标签 有 一 个 基本 的 属性 : type, 用 于 设置 样式 的 类 型 。 在 HTML 中 ,type 的 
取 值 就 一 个 : text/css。 
下 面 是 一 个 二 style> 标 签 的 使 用 示例 : 
< style type = "text/css"> 
.tdl{ 
background - image: url(.. /tuxiang/index_rl1l_c9. jpg); 
} 
.wbl { 
font - family: "宋体 "; 
font - size: 10pt; 
color: #FFF; 
} 
</style> 
2. CSS 样式 代码 
CSS 样式 代码 放 在 二 style> 所 /style> 标 签 中 间 , 它 的 格式 一 般 如 下 : 
.样式 名 称 { 


样式 属性 名 1: 属性 值 ; 
样式 属性 名 2: 属性 值 ; 


样式 属性 名 n: 属性 值 ; 

} 

比如 二 style 二 标签 的 示例 中 ,tdl 和 wbl 是 样式 的 名 称 , background-image、 font- 
family、font-size、color 是 样式 属性 名 称 , 而 它们 的 冒号 后 面 就 是 各 自 的 属性 值 。 

3. 引入 样式 

在 一 个 网 页 文件 中 附加 一 个 样式 表 , 有 两 种 方式 : 链接 和 导入 。 

如 果 是 链接 的 方式 ,那么 网 页 被 浏览 的 时 候 , Web 服务 器 会 查找 对 应 的 样式 表 文件 , 解 
释 执行 里 面 的 样式 代码 ,从 而 对 网 页 产生 修饰 效果 。 在 网 页 代码 视图 的 二 head 二 三 /head 记 
部 分 中 ,可 以 看 到 导入 样式 代码 如 下 : 


< link href = "CSS 样式 /文本 样式 .css" rel = "stylesheet" type = "text/css" /> 


其 中 ,一 link 二 标签 表示 链接 一 个 对 象 ,href 用 来 设置 对 象 的 相对 存放 位 置 和 名 称 ,rel 
用 来 说 明 链接 对 象 与 当前 网 页 文件 的 关系 ,type 用 来 说 明 被 链接 对 象 的 类 型 。 上 面 一 行 代 
码 设置 了 链接 的 是 当前 网 页 目录 下 “CSS 样式 ”文件 夹 中 的 “文本 样式 . css" 文 件 ,该 文件 与 
网 页 的 关系 是 “样式 表单 ”( 即 修饰 与 被 修饰 的 关系 ) ,文件 的 类 型 是 text/css。 

如 果 是 导入 的 方式 ,那么 网 页 被 浏览 的 时 候 , 样 式 表 文 件 中 的 样式 代码 会 被 导入 到 当前 
的 网 页 中 ,再 解释 执行 样式 代码 。 在 网 页 代码 视图 的 二 head 二 二 /head 二 部 分 中 ,可 以 看 到 
导入 样式 代码 如 下 : 

<style type = "text/css"> 


@import url("CSS 样式 /文本 样式 .css"); 
</style> 
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其 中 ,@import 表示 导入 一 个 文件 ,url("CSS 样式 /文本 样式 . css") 指 定 了 文件 的 相对 
存储 位 置 和 名 称 ,从 中 可 以 看 ,要 导入 的 文件 存储 在 当前 网 页 文档 目录 下 的 “CSS 样式 ” 文 


件 夹 中 ,文件 的 名 字 叫 做 “文本 样式 . css”。 


4. 样式 与 class 属性 


定义 好 一 个 样式 之 后 ,通过 使 用 class 属性 为 大 部 分 的 对 象 设置 使 用 样式 。 


class 属性 的 用 法 如 下 : 
class = "样式 名 " 


下 面 是 几 个 关于 class 属性 的 应 用 示例 。 


(1) 在 整个 网 页 上 使 用 wbl 样式 : 


<body class = "wbl"> … </body> 


(2) 在 整个 表格 中 使 用 tdl 样式 : 
<table class = "tdl"> … </table> 


(3) 在 整个 文本 段落 中 使 用 wbl 样式 : 


<p class = "wbl"> … </p> 
(4) 对 超 链 接 使 用 linkl 样式 ， 
<aclass= "linkl"> … </a> 


5. 常见 CSS 样式 属性 及 值 
(1) 文字 属性 


color : #999999; 

font - family : 宋体 , sans - serif; 
font- size : 9pt; 

font - style:itelic; 

font ~ variant :small ~ caps; 
letter ~ spacing : lpt; 

line— height : 200%; 

font - weight:bold; 

vertical ~- align: sub; 
vertical ~ align: super; 

text - decoration: line ~ through; 
text - decoration: overline; 
text - decoration:underline; 
text - decoration:none; 

text 一 transform : capitalize; 
text - transform : uppercase; 
text - transform : lowercase; 
text — align:right; 

text — align: left; 

text - align:center; 

text - align: justify; 
vertical ~ align:top; 


/* 文字 颜色 * / 

/* 文字 字体 * / 
/x* 文 字 大 小 */ 

/* 文 字 斜 体 * / 
/* 小 字体 * / 

/* 字 间距 离 * / 

/* 设置 行 高 * / 

/* 文 字 粗 体 * / 
/* 下 标 字 * / 

/* 上 标 字 * / 

/* 加 删除 线 * / 

/* 加 顶 线 * / 

/x* 加 下 划 线 */ 

/* 删除 链接 下 划 线 * / 
/* 首 字 大 写 * / 

/x* 英 文大 写 */ 

/x* 英 文 小 写 */ 

/* 文 字 右 对 齐 * / 
/* 文 字 左 对 齐 * / 
/* 文字 居中 对 齐 * / 
/* 文字 分 散 对 齐 * / 
/* 垂直 向 上 对 齐 * / 
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vertical - align:bottom; 
vertical ~- align:middle; 
vertical ~ align: text — top; 
vertical - align: text ~ bottom; 


(2) 边框 空白 属性 


padding — top:10px; 
padding — right:10px; 
padding — bottom:10px; 
padding - left:10px; 


(3) 符号 属性 


list- style— type:none; 

list— style 一 type:decimal; 
1list- style 一 type:lower - roman; 
1list- style 一 type:upper - roman; 
1list- style 一 type:lower -alpha; 
list- style 一 type:upper - alpha; 
list- style— type:disc; 

list- style- type:circle; 

1list- style— type:square; 

list- style— image:url(/dot. gif); 
list- style— position:outside; 
list— style— position: inside; 


(4) 背景 样式 属性 


background - color : # FS5E2EC; 
background: transparent; 


background ~ image : url(/image/bg. gif); 


background - attachment : fixed; 
background - repeat : repeat; 
background - repeat : no - repeat; 
background - repeat : repeat 一 Xi 
background - repeat : repeat — y; 
background— 90%; 


(5) 框 线 属性 


border - top : 1px solid # 6699cc; 


border - bottom : 1px solid #6699cc; 


border - left : 1px solid #6699cc; 


border - right : 1px solid #6699cc; 


border - top— color : #369; 
border 一 top 一 width :1px; 
border - top— style : solid; 


/x* 垂直 向 下 对 齐 */ 
/* 垂直 居中 对 齐 */ 
/* 文 字 垂直 向 上 对 齐 * / 
/* 文 字 垂直 向 下 对 齐 * / 


/* 上 边框 留 空 白 * / 
/* 右边 框 留 空 白 * / 
/* 下 边框 留 空 白 * / 
/* 左 边框 留 空白 


/* 不 编号 * / 

/* 阿拉 伯 数 字 * / 
/* 小 写 罗马 数字 */ 
/* 大 写 罗马 数字 */ 
/* 小 写 英文 字母 * / 
/* 大 写 英文 字母 * / 
/* 实 心 圆 形 符号 * / 
/* 空 心 圆 形 符号 * / 
/* 实心 方形 符号 * / 
/* 图 片 式 符号 * / 
/* 凸 排 */ 

/* 缩 进 */ 


/* 背景 颜色 */ 

/* 透视 背景 * / 

/x* 背景 图 片 */ 

/* 浮 水 印 固定 背景 * / 

/* 重复 排列 - 网 页 默认 * / 

/* 不 重复 排列 * / 

/* 在 x 轴 重复 排列 * / 

/* 在 Y 轴 重复 排列 * / 

/* 背景 图 片 x 轴 与 了 Y 轴 的 位 置 * / 


/* 上 框 线 * / 
/* 下 框 线 * / 
/* 左 框 线 * / 
/* 右 框 线 */ 
/* 设 置 上 框 线 top 颜色 * / 
/* 设置 上 框 线 top 宽度 */ 
/* 设置 上 框 线 top 样式 * / 


网 站 测试 与 发 布 


本 章 介绍 常用 的 Web 服务 器 软件 ,主要 是 IIS 的 使 用 ; 同时 介绍 网 站 测试 的 目的 和 原 
则 。 让 读者 可 以 通过 IIS 来 发 布 个 人 网 站 ,并 对 个 人 网 站 进行 测试 和 修改 完善 。 

本 章 学 习 要 点 : 

(1) 了 解 Web 服务 器 

(2) 理解 网 站 测试 的 目的 

(3) 理解 网 站 测试 的 原则 

(4) 掌握 IIS 的 使 用 


6.1 Web 服务 器 


6.1.1 其 本 概念 


Web 服务 器 是 一 种 运行 在 计算 机 上 的 程序 , 它 提 供 了 网 上 信息 浏览 的 服务 。 有 时 也 将 
Web 服务 器 称 为 “网 站 服务 器 ”, 因 为 网 站 必须 以 Web 服务 器 为 运行 平台 才能 够 发 布 到 因 
特 网 上 ,让 网 络 上 的 用 户 浏览 。 

假设 ,一 个 网 站 运行 于 计算 机 A 的 Web 服务 器 上 ,网 络 用 户 浏览 该 网 站 的 过 程 如 下 。 

(1) 网 络 用 户 通过 计算 机 上 的 Web 浏览 器 ,发 送 该 网 站 的 网 址 和 要 浏览 的 网 页 名 到 因 
特 网 上 。 

(2) 这 些 信 息 被 该 用 户 的 网 络 运营 商 ( 比 如 电信 ) 的 DNSCDomain Name System) 服 务 
器 接收 ,DNS 服务 器 把 网 址 转变 成 IP 地 址 后 继续 把 IP 地 址 和 网 页 名 称 发 送 到 因特网 上 ， 
经 过 传播 后 到 达 IP 地 址 所 对 应 的 计算 机 A。 

(3) 计算 机 A 上 的 Web 服务 器 接收 到 网 页 名 称 , 并 查找 对 应 的 网 页 文件 ,找到 之 后 把 
它 发 送 回 网 络 用 户 的 计算 机 ,由 它 的 Web 浏览 器 接收 网 页 信息 ,并 将 网 页 显示 出 来 。 

上 述 的 过 程 可 以 用 图 6-1 来 简单 描述 ,图 中 省 略 了 DNS 服务 器 的 转换 环节 ,直接 显示 
了 网 络 用 户 的 Web 浏览 器 与 网 站 的 Web 服务 器 之 间 的 对 话 过 程 。 


1. 向 服务 器 发 出 Web 请 求 
寻 
le Internet 找 
人 页 
面 
Web 浏 览 器 Web 服 务 器 


3. 将 文档 传送 给 Web 浏 览 器 


图 6-1 用 户 浏览 网 站 的 过 程 


超人 流 
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注意 : 这 里 的 Web 服务 器 全 称 应 该 是 “Web 服务 器 "软件 , 它 不 同 于 1. 1.3 小 节 中 提 
到 的 Web 服务 器 ,后 者 是 指 安装 了 Web 服务 器 的 计算 机 ,简称 为 Web 服务器。 所 以 , 今 
后 如 果 讲 到 Web 服务 器 ,有 可 能 指 计算 机 ,也 有 可 能 指 软件 ,需要 结合 上 下 文 的 语 境 来 
理解 。 


6.1.2 常见 Web 服务 路 


常见 的 Web 服务 器 有 Apache、Tomcat、IIS 等 。 不同 的 Web 服务 器 需要 的 操作 系统 不 
完全 相同 ,支持 的 网 站 开发 技术 也 有 所 不 同 。 

1. Apache 

Apache 是 Apache 软件 基金 会 开发 的 一 个 Web 服务 器 。 由 于 可 以 在 大 多 数 计算 机 操 
作 系 统 中 运行 ,并 且 运 行 简单 、 速 度 快 、 稳 定性 和 安全 性 高 ,Apache 被 广泛 使 用 ,是 最 流行 的 
Web 服务 器 之 一 。 同 时 ,Apache 也 是 一 款 自由 软件 , 它 在 网 络 上 是 开放 式 的 ,每 一 个 网 络 
用 户 都 可 以 对 它 开发 新 功能 ,修改 缺陷 ,帮助 它 不 断 地 完善 ,这 也 是 Apache 受到 市 场 欢迎 
的 原因 之 一 。 

Apache 对 网 站 开发 技术 的 支持 也 很 广泛 ,其 中 包括 了 ASP、PHP、ASP. NET,、JSP 等 。 
一 般 情况 下 ,在 Linux 或 UNIX 操作 系统 中 ,选择 使 用 Apache 作为 Web 服务 器 。 

图 6-2 是 Apache 的 安装 界面 之 一 。 


0 SS 于 | 
License Agreement 
Please read the following icense agreement carefuly， 
Apache License 
Version 2.0, January 2004 
http:/www.apache.org/licenses/ 


TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 
1. Definitions. 


”License" shall mean the terms and conditions for use, reproduction, and 
distribution as defined by Sections 1 through 9 of this document 


图 6-2 Apache 的 安装 界面 之 一 


2. Tomcat 

Tomcat 由 Apache 软件 基金 会 、Sun 公司 和 其 他 一 些 公 司 及 个 人 共同 开发 而 成 。 
Tomcat 主要 用 来 支持 使 用 JSP 技术 开发 的 网 站 的 运行 。 它 的 主要 特点 是 技术 先进 .占用 
系统 资源 少 、. 运 行 稳定 、 使 用 免费 ,因此 深 受 JSP 爱好 者 的 欢迎 。 

Tomcat 同样 可 以 运行 在 多 种 操作 系统 中 ,包括 Windows、Linux 和 UNIX。 

图 6-3 是 Tomcat 的 安装 界面 之 一 。 
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Choose Components 
Choose which features of Apache Tomeat you want to install 网 


(Check the components you want to rstall and urcheck the components you dont wark to 
nt Chck Next to continue. 


Seeateyped na [mm |] 


Or, salect the optional 
components you wish to 
ta 


Spece requred 全 .296 


Mlsoft tral Symem v20 


es [FE co | 


图 6-3 Tomcat 的 安装 界面 之 一 


3. IIS 


IIS(Internet Information Services, 因 特 网 信息 服务 ) 是 由 微软 公司 提供 的 一 个 Web 服 
务 器 ,主要 运行 在 Windows 系列 的 操作 系统 中 。IIS 同样 支持 多 种 网 站 开发 技术 ,包括 


ASP、PHP、ASP. NET、JSP 等 。 


JIS 从 诞生 到 现在 ,经 历 了 多 个 版 本 ,不 同 版 本 的 IIS 搭配 不 同 版 本 的 Windows 操作 系 


统 使 用 ,如 表 6-1 所 示 。 


表 6-1 IIS 版 本 及 对 应 Windows 操作 系统 
IIS 版 本 Windows 操作 系统 
IIS 5.0 Windows 2000 
IIS 6.0 Windows Server 2003、Windows Vista Home Premium、Windows XP Professional 
JIIS 7.0 Windows Vista、Windows Server 2008、Windows 7 


图 6-4 是 IIS 运行 界面 。 本 书 将 使 用 IIS 作为 Web 服务 器 ,介绍 如 何 使 用 JIS 发 布 


网 站 。 
ME Internet 信息 服务 
文件 外 ”操作 以) 查看 Y 帮助 00 
和 + 向 | 四 办 下 区 包 国 旦 1 
和 Internet 信息 服务 | 名称 路 径 
日 时 20111206-2029 中 地 计算 机 ) | 纺 IIsHelp Mwindows\help\iishelp 
s 自 RM 国 Pinters CEDiIDOYSAweb\printers 
日 二 默认 网 站 help aif 
别名 Is 加 iisstet «sp 
| Irintes 国 localstart amp 
由 才 默认 SMTP 虚拟 服务 器 回 me si 
团 pagerror gif 
轿 print aif 
rarnine sif 
web. gif 
国 vincp sif 
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IIS 运行 界面 
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6.1.3 IIS 的 安装 


IIS 的 安装 在 “Windows 组 件 管理 ?对 话 框 中 完成 ,具体 步骤 如 下 。 
(1) 打开 * 控 制 面板 ?窗口 ,双击 “添加 或 删除 程序 ”图标 ,打开 * 添 加 或 删除 程序 ”窗口 ， 
如 图 6-5 所 示 , 单 击 弹出 窗口 左 侧 的 “添加 /删除 Windows 组 件 ” 图 标 。 


区 法 加 或 副 除 程序 
-| 


四 


加 Adobe Community Help 
国 Adobe Dresnweaver CS5 大 小 624.00NB 
Adobe Fireworks CS5 大 小 1,070.00NB 
dobe Flash ?layer 10 ActiveX 
加 Adobe Flash Player 10 Plugin 

时 国 Atobe wedis Player 


图 6-5 ”添加 或 删除 程序 


(2) 在 弹出 的 “Windows 组 件 向 导 ” 对 话 框 中 ,找到 “Internet 信息 服务 (IIS)”, 如 
图 6-6 所 示 。 如 果 该 复 选 框 没 有 被 选择 ,说 明 计 算 机 上 没有 安装 IIS。 这 时 ,选择 该 复 选 框 ， 
然后 单 击 “ 下 一 步 " 按 钮 。 


Windows 组 件 向 导 


Tindors 钥 件 3 
可 以 添加 或 删除 Yindows XP 的 组 件 。 他 


要 法 ; 个 组 件 ， 请 单 击 六 。 灰 色 框 表示 只 会 安装 该 组 件 的 
一 部 分 。 要 查看 组 件 内 容 ， 请 单 击 “ 详 细 信 息 ”。 


00W 二 | 
| 


0.0 MB 


Outlook Express 00WB 加 | 


包括 Web 和 FTP ， 以 及 对 FrontPage、 事 务 处 理 、Active 
Server Pages 和 数据 库 连 接 的 支持 。 


i 


6-6 Windows 组 件 向 导 


(3) 进入 Windows 组 件 安装 向 导 。 如 果 在 安装 过 程 中 出 现 * 所 需 文件 "对话 框 ,如 
图 6-7 所 示 , 单 击 “浏览 ?按钮 ,选择 IIS 安装 包 对 应 的 文件 夹 , 然 后 单 击 “ 确 定 ” 按 钮 ,直至 安 
装 完成 。 安 装 成 功 后 .在 “控制 面板 "窗口 的 管理 工具 中 .能够 看 到 “Internet 信息 服务 ”。 
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需要 Windows XP Professional Service Pack 3 定 
上 bo Ce ] 


CD 


staxmen, 


输入 文件 所 在 的 路 径 ,然后 单 击 “确定 ”。 


文件 复制 来 源 世 ) 
D:\ 迅 雷 下 载 \IIS_XPSP3VIIS_XPSF3 
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< 任务 6.1 


内 容 : 根据 操作 系统 版 本 ,在 计算 机 上 安装 相应 版 本 的 IIS 组 件 。 
6.2 网 站 发 布 


网 站 发 布 一 般 有 两 种 目的 : 一 是 把 网 站 发 布 到 单机 的 Web 服务 器 上 ,以 便 对 网 站 进行 
试 运行 ,测试 网 站 的 运行 效果 ; 二 是 通过 网 络 运营 商 ,把 网 站 发 布 到 广域网 中 ,以 便 让 所 有 
的 网 络 用 户 都 能 够 进行 浏览 。 

6.2.1 发 布 到 单机 Web 服务 路 


1. 发 布 

单机 Web 服务 器 是 指 安装 了 Web 服务 器 软件 的 个 人 计算 机 ,这 里 所 用 的 Web 服务 器 
软件 是 IS。 把 网 站 发 布 到 单机 Web 服务 器 上 ,其实 就 是 要 把 网 站 发 布 到 IIS, 让 网 站 可 以 
运行 在 IIS 这 个 软件 平台 上 ,发 布 的 步骤 如 下 。 

(1) 把 整个 网 站 根 目录 复制 到 单机 Web 服务 器 上 ,确保 网 站 中 所 有 的 相关 文件 都 被 复 
制 进来 。 假 设 存放 位 置 是 *E:\ 爱 心 屋 ”。 

(2) 打开 “控制 面板 "窗口 ,进入 管理 工具 ,打开 Internet 信息 服务 。 在 窗口 左 侧 , 单 击 
“网 站 ?前 面 的 “十 ”, 右 击 * 默 认 网 站 ?选项 ,在 弹出 菜单 中 选择 “新建 "虚拟 目录 ?命令 , 打 
开 “ 虚 拟 目 录 创 建 向 导 ” 对 话 框 ,如 图 6-8 所 示 。 


虚拟 目录 创建 向 导 


欢迎 使 用 虚拟 目录 创建 向 导 


此 向 导 将 帮助 您 在 网 站 上 新 建 一 个 虚拟 目录 。 


单 击 “ 下 一 步 ” 按钮 继续 


[2 ， 


图 6-8 “虚拟 目录 创建 向 导 ” 对 话 框 1 
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(3) 在 “虚拟 目录 创建 向 导 ” 对 话 框 中 单 击 下 一 步 ” 按 钮 ,设置 虚拟 目录 别名 ,如 
图 6-9 所 示 。 这 个 别名 最 好 和 网 站 的 名 字 有 关联 ,这 样 便于 与 其 他 网 站 的 虚拟 目录 区 别 开 
来 。 再 单 击 “ 下 一 步 按 钮 ,设置 网 站 内 容 目录 , 即 单 击 * 浏 览 "按钮 ,选择 网 站 在 计算 机 中 的 
根 目 录 , 如 图 6-10 所 示 。 在 下 一 步 中 设置 访问 权限 ,这 里 不 需要 修改 ,使 用 默认 的 设置 就 可 
以 ,继续 单 击 “ 下 一 步 "按钮 ,出 现 “ 已 成 功 完 成 虚拟 目录 创建 向 导 ”, 单 击 “ 完 成 "按钮 。 这 样 
虚拟 目录 就 创建 好 了 。 


亩 拟 目 录 创 建 向 导 


虚拟 目录 别名 
必须 为 虚拟 目录 提供 一 个 简短 的 名 称 或 别名 ， 以 便于 快速 引用 。 


认 呈 有 习 访问 权限 的 别名 。 使 用 的 命名 规 


别名 四: 


[iximm 


《上 - 步 @) 氏 二 步 吕 > 


6-9 “虚拟 目录 创建 向 导 ” 对 话 框 2 


诬 拟 目录 创建 向 导 
网 站 内 容 目录 
要 发 布 到 网 站 上 的 内 容 的 位 置 。 
输入 内 容 所 在 的 目录 路 径 。 


目录 @) 
:\ 受 必 主 


图 6-10 设置 网 站 内 容 目录 


虚拟 目录 创建 之 后 ,在 “Internet 信息 服务 窗口 的 左 侧 会 看 到 刚刚 创建 的 虚拟 目录 名 
称 ,选中 它 , 在 窗口 的 右 侧 就 会 出 现 整个 网 站 的 内 容 , 包 括 所 有 的 子 文件 夹 和 文件 。 这 样 就 
表明 网 站 已 经 被 发 布 到 IIS 这 个 Web 服务 器 平台 上 。 如 果 有 多 个 网 站 ,都 可 以 依照 刚才 的 
步 又 把 它们 发 布 到 IIS 上 ,因为 在 IIS 中 ,可 以 创建 多 个 虚拟 目录 。 
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2. 浏览 

网 站 发 布 到 IIS 之 后 最 简单 的 浏览 方法 是 ,在 “Internet 信息 服务 ”窗口 的 右 半 部 分 中 ， 
右 击 要 浏览 的 网 页 ,在 弹出 的 菜单 中 选择 “浏览 命令。 但 是 ,这 样 的 做 法 不 够 规范 ,也 不 能 
体现 出 浏览 器 与 Web 服务 器 的 对 话 过 程 ,所 以 换 一 种 “正规 ”的 做 法 。 

首先 ,打开 Web 浏览 器 ,比如 IE; 然后 在 浏览 器 的 地 址 栏 输入 网 页 的 地 址 ,格式 为 
“http://127. 0.0.1/ 虚 拟 目录 名 称 / 子 文 件 夹 名 称 / 网 页 名 称 . 后 级 名 ”, 比 如 http://127. 0. 
0.1/aixinwu/wangye/index. htm。 按 Enter 键 后 就 可 以 看 到 网 页 的 内 容 了 。 

为 什么 是 127. 0. 0. 1 呢 ? 这 是 一 个 特殊 的 IP 地 址 ,代表 当前 正在 使 用 的 这 台 计 算 机 。 
在 127.0.0. 1 前 面 加 上 http 表示 所 发 出 的 信息 是 关于 Web 浏览 的 ,所 以 计算 机 就 会 启用 
本 机 上 的 Web 服务 器 来 接收 这 个 信息 ,并 且 查 找 对 应 的 网 页 文件 发 送 回 浏览 器 显示 。 

3. 默认 网 站 

其 实 也 可 以 把 网 站 设置 成 IIS 中 的 默认 网 站 ,设置 成 功 后 ,访问 网 站 的 地 址 就 会 变 得 更 
简单 一 些 。 设 置 方法 如 下 。 

首先 ,用 和 鼠标 右 击 “ 默 认 网 站 ”选项 ,在 弹出 的 菜单 中 选择 “属性 ”命令 ,打开 “默认 网 站 
属性 ”对 话 框 ; 接着 选择 “ 主 目录 ”选项 卡 ,如 图 6-11 所 示 , 单 击 “ 本 地 路 径 ” 栏 右 侧 * 浏 览 ” 按 
钮 ,选择 网 站 的 根 目录 ,然后 单 击 “ 确 定 ” 按 钮 。 


| 网 站 “|IsAPI 铺 渤 器 | 主 目录 | 文档 “| 目录 安全 性 | WTTP 头 | 自 定义 铺 误 | 
连接 脏腑 祈 时 的 内 容 来 源 
回 此 计算 机 上 的 目录 号 
〇 另 一 各 计算 机 上 的 共享 (8) 
侣 重 定向 到 WLW 


本 地 路 径 避 ):。 [:\ 爱 心 寿 
口 财 本 资源 访问 O) 记录 访问 o) 
回 读 取 @) 


回 素 引 资源 上 ) 


歌 认 朱 用 程序 
爸 认 网 站 > 

| 经 脚本 

中 民用 ) 


取消 ”] [LE 用 W ] [天 有 


6-11 IIS 中 的 默认 网 站 属性 


这 样 , 若 要 浏览 网 站 主页 ,只 需 在 浏览 器 地 址 栏 输入 http://127. 0. 0. 1/wangye/ 
index. htm 就 可 以 了 。 注 意 ,默认 网 站 只 能 设置 一 个 。 

设置 默认 网 站 之 后 ,网 站 地 址 似乎 还 是 有 点 长 ,能 不 能 再 简单 点 呢 ? 可 以 。 但 是 在 设置 
之 前 ,需要 对 网 站 根 目录 下 的 结构 做 一 点 调整 ,就 是 把 网 页 从 子 文件 夹 中 移出 来 直接 放 到 根 
目录 下 。 注 意 ,这 个 移动 的 操作 一 定 要 在 Dreamweaver 的 “文件 ”面板 的 站 点 中 执行 。 

比如 “爱心 屋 ” 的 移动 结果 如 图 6-12 所 示 。 

目录 结构 调整 好 以 后 ,修改 默认 网 站 的 属性 设置 。 在 属性 窗口 中 ,选择 “文档 ”选项 卡 ， 
选择 “启用 默认 文档 " 复 选 框 ,然后 单 击 “ 添 加 ”按钮 ,输入 “上 默认 文档 名 ”为 网 站 的 主页 名 (这 
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EE 司 [#ai 目 可 
免 GI8 人 名 全 | 加 


EE 


和 CGI|STZY 甸 | 日 


index. htn 16KB HTN 
index2. htal 16KB HTN 
subpage. ht BEB HIN 


6-12 在 文件 面板 中 移动 网 页 文件 


里 是 index. htm) , 单 击 * 确 定 "按钮 后 ,通过 * 上 移 ” 按 钮 剧 把 刚刚 添加 的 文档 名 移 到 第 一 
个 ,再 单 击 “ 确 定 ” 按 钮 。 此 时 在 浏览 器 地 址 栏 中 输入 http://127. 0. 0. 1 后 按 Enter 键 就 可 
以 看 到 网 站 的 主页 了 。 


6.2.2 发 布 到 广域网 


要 把 网 站 发 布 到 广域网 ,一般 都 要 通过 网 络 运营 商 。 

首先 ,确定 网 站 存放 位 置 。 一 般 有 两 个 选择 ,自己 购买 一 个 Web 服务 器 或 使 用 网 络 运 
营 商 的 Web 服务 器 。 购 买 Web 服务 器 的 成 本 比价 高 ,对 个 人 来 说 并 不 适合 ,一般 适用 于 单 
位 。 如 果 是 使 用 网 络 运营 商 的 Web 服务 器 , 则 一 般 需 要 缴纳 一 定 的 费用 ,用 做 计算 机 存储 
空间 的 租赁 费 。 当 然 ,目前 网 络 上 也 有 一 些 免费 的 Web 服务 器 ,提供 免费 的 存储 空间 , 供 网 
站 存放 到 网 络 上 。 

然后 ,申请 一 个 域名 (俗称 “网 址 ”)。 申 请 成 功 之 后 ,就 可 以 使 用 自己 的 网 址 在 Internet 
中 浏览 到 自己 的 网 站 。 


< 任务 6.2 
内 容 : 把 个 人 网 站 发 布 到 单机 的 Web 服务 器 上 。 


6.3 网 站 测试 


1. 网 站 测试 的 目的 

网 站 发 布 之 后 ,通过 网 址 (如 果 是 在 单机 上 ,就 是 127.0.0.1 与 虚拟 目录 等 组 成 的 地 址 ) 
就 可 以 浏览 网 站 。 一 般 在 网 站 发 布 到 广域网 或 者 一 个 内 部 网 之 前 (有 的 网 站 是 在 单位 内 部 
使 用 ) 都 要 在 小 范围 内 先 使 用 一 段 时 间 , 称 为 网 站 测试 。 

网 站 测试 的 目的 是 什么 呢 ? 

首先 ,查看 网 站 中 的 各 个 网 页 运行 是 否 正常 ,是 否 能 看 到 每 个 网 页 的 正常 显示 效果 以 及 
网 页 之 间 的 链接 是 否 正常 ,是 否 存在 单 击 超 链接 却 无 法 打开 的 情况 。 

其 次 ,查看 整个 网 站 的 功能 是 否 符合 客户 的 要 求 。 虽 然 在 做 网 站 需求 分 析 的 时 候 , 开 发 
者 跟 客户 可 能 已 经 沟通 过 无 数 次 ,但 是 最 终 做 出 来 的 网 站 可 能 还 是 存在 一 些 不 足 。 可 能 是 
细节 上 还 不 能 完全 符合 客户 的 需求 ; 也 可 能 在 网 站 的 运行 过 程 中 ,客户 发 现 自己 原来 的 要 
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求 不 太 合适 ,会 重新 提出 一 些 要 求 。 这 些 问题 都 需要 在 网 站 运行 的 过 程 中 发 现 。 

所 以 ,网 站 测试 的 目的 是 为 了 让 网 站 存在 的 问题 尽 可 能 地 减少 ,并 且 让 网 站 尽量 地 靠近 
实际 需求 ,最 大 限度 地 发 挥 它 的 作用 。 

2. 网 站 测试 的 原则 

进行 网 站 测试 ,应 该 遵守 一 些 原则 ,以 便 更 好 地 达到 测试 的 目的 。 

(1) 测试 网 站 的 人 员 ,尽量 不 要 是 网 站 开发 者 本 人 ,以 避免 测试 的 过 程 不 够 客观 。 

(2) 要 尽早 地 进行 测试 ,并 且 应 该 不 断 地 测试 。 尽 早 地 测试 能 够 避免 存在 的 一 些 隐患 
给 网 站 的 使 用 者 带 来 损失 ; 不 断 地 测试 能 尽量 多 地 发 现 问题 ,提高 网 站 的 质量 。 

(3) 如 果 是 一 个 动态 的 网 站 ,应 该 要 注意 测试 数据 的 选择 ,这 个 在 此 不 做 论述 。 

(4) 测试 网 站 的 过 程 中 要 做 好 测试 记录 ,最 后 还 应 该 编写 测试 报告 。 

关于 网 站 的 测试 目的 ,原则 和 方法 ,本 章 只 是 进行 了 简单 地 介绍 。 事实 上 ,网 站 的 测试 
还 包含 语言 测试 .数据库 测试 .速度 测试 ,负载 测试 .压力 测试 接口 测试 ,兼容 性 测试 .安全 
测试 等 多 个 方面 。 具 体 的 内 容 读者 可 查阅 有 关 网 站 测试 的 专业 书籍 。 


SS>~ 任 务 6.3 
内 容 : 测试 个 人 网 站 ,如 果 发 现 问题 ,进行 修改 完善 。 


其 包 洲 


校园 网 站 需求 分 析 与 设计 


本 章 讨论 校园 网 站 的 需求 以 及 其 主页 和 子 页 界面 的 设计 。 在 前 面 需 求 分 析 知 识 的 基础 
上 进一步 讨论 需求 分 析 的 细节 问题 ,并 给 出 了 本 章 校园 网 站 案例 的 主要 需求 。 在 界面 设计 
方面 ,进一步 介绍 Fireworks 中 关于 制作 网 站 LOGO 的 主要 技术 以 及 更 高 级 的 图 像 处 理 技 
术 , 最 后 介绍 校园 网 站 主页 和 子 页 界面 设计 案例 的 制作 过 程 。 


本 章 学 习 要 点 : 

(1) 了 解 需求 分 析 的 细节 

(2) 掌握 “图 层 "面板 的 使 用 

(3) 掌握 “ 滤 镜 ”面板 和 "钢笔 "工具 的 使 用 
(4) 掌握 文本 的 一 些 特殊 处 理 方法 

(5) 掌握 各 种 选取 工具 的 使 用 

(6) 掌握 魔术 棒 的 使 用 

(7) 掌握 蒙 版 的 使 用 


现在 ,要 开始 本 书 的 第 2 个 案例 项 目 一 一 校园 网 站 的 开发 ,开发 的 第 一 个 阶段 仍然 是 需 
求 分 析 。 在 个 人 网 站 的 需求 分 析 阶 段 , 介 绍 了 需求 分 析 的 原则 和 方法 ,并 举例 介绍 了 需求 分 
析 报 告 的 写法 。 而 校园 网 站 是 比 个 人 网 站 更 加 复杂 的 项 目 , 它 的 网 页 数量 会 更 多 ,需求 也 会 
更 多 样 化 ,所 以 在 进行 需求 分 析 时 候 ,应 该 考虑 更 多 细节 的 东西 ,并 把 它们 写 进 需 求 分 析 报 
告 中 。 

首先 ,功能 描述 部 分 应 该 更 加 详细 。 在 个 人 网 站 中 ,主要 的 功能 需求 就 是 展示 一 些 图 文 
信息 ,所 以 网 站 中 的 每 个 栏目 都 只 是 链接 到 一 些 简单 的 网 页 。 但 事实 上 ,在 生活 或 工作 中 接 
和 触 到 的 大 部 分 网 站 ,它们 的 功能 不 只 是 展示 图 文 信息 那么 单一 ,而 是 多 样 化 的 。 比 如 , 单 击 
某 个 栏目 的 时 候 , 要 求 打 开 一 个 发 送 邮件 的 窗口 或 者 一 个 框架 集 网 页 或 者 一 个 其 他 类 型 的 
文档 。 正 因为 校园 网 站 中 的 每 个 栏目 对 应 内 容 呈 现 的 方式 并 不 是 单一 的 ,所 以 在 进行 需求 
分 析 时 要 与 客户 沟通 清楚 ,并 将 每 个 栏目 内 容 的 表现 形式 写 人 需求 分 析 报告 的 功能 描述 
部 分 。 

其 次 ,应 该 添加 网 站 开发 进度 及 日 程 的 计划 说 明 。 因 为 一 个 具有 一 定 规模 的 网 站 项 目 
需要 投入 一 定 的 人 力 和 时 间 ,如 果 人 员 的 使 用 和 时 间 的 安排 不 恰当 , 则 可 能 导致 整个 项 目的 
开发 成 本 增加 ,所 以 必须 事先 做 出 合理 的 开发 计划 。 

最 后 ,如 果 有 需要 还 应 该 给 出 网 站 使 用 的 流程 图 。 流 程 图 可 以 说 明 网 站 中 各 个 栏目 或 
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者 功能 模块 之 间 的 关系 ,让 开发 者 明白 用 户 在 网 站 上 操作 的 先后 顺序 ,这 样 能 够 有 助 于 设计 
出 更 人 性 化 的 用 户 操作 界面 。 不 过 这 一 点 主要 适用 于 操作 流程 比较 复杂 的 网 站 ,而 校园 网 
站 层次 比较 简单 ,各 个 栏目 之 间 主 要 是 并 列 的 关系 ,所 以 可 以 不 需要 流程 图 。 

在 对 不 同类 型 的 网 站 进行 需求 分 析 的 时 候 , 一 般 都 应 该 考虑 到 上 面 介绍 的 几 点 。 

现在 ,假设 进行 了 校园 网 站 的 需求 分 析 。 结 合 上 述 要 求 , 得 到 主要 需求 信息 如 下 。 

1. 网 站 功能 概述 

本 网 站 是 某 某 校园 网 站 ,主要 展示 学 校 概况 、 各 部 门 信 息 、 校 园 新 闻 公 告 以 及 科研 工作 
情况 ,让 学 校 师 生 能 够 及 时 了 解 学 校 的 近况 ,同时 也 让 非 本 校 人 员 能 够 对 学 校 的 整体 情况 进 
行 更 全 面 、 更 深入 的 了 解 。 

2. 网 站 的 功能 结构 图 

本 网 站 主要 有 学 校 概况 .公共 服务 、 系 部 导航 、 部 门 导航 、 新 闻 中 心 、 通 知 公告 .科研 工作 、 
友情 链接 8 个 模块 ,其 中 学 校 概况 .公共 服务 、 系 部 导航 ,部 门 导航 、 友 情 链接 包含 二 级 菜单 。 

图 7-1 展示 了 各 个 模块 组 成 的 网 站 功能 结构 。 


学 校 概况 学 校 简介 | | 校园 剪影 | | 机 构 设置 


| pe 办 公 电 话 查 询 校 历 


系 部 导航 | -| 计算 机 系 | | 经 济 系 | | 人 文 社 科 系 
| 
学 部 门 导航 教务 处 | | 学 生 处 | | 财务 科 
校 
一 新 闻 中 心 
| 通知 公告 
[科研 工作 
友情 链接 站 | 中 国教 育 信息 网 | | 中 国教 育 在 线 
图 7-1 某 学 校 网 站 功能 结构 图 
3. 各 功能 模块 描述 
(1) 学 校 简介 
学 校 简介 模块 链接 到 一 个 普通 网 页 ,网 页 的 主要 内 容 是 “福州 职业 技术 学 院 ” 的 文字 
简介 。 
(2) 校园 剪影 


校园 剪影 模块 链接 到 一 个 框架 集 网 页 ,要 求 一 边框 架 显 示 风 景 的 标题 ,一 边框 架 显 示 对 
应 的 图 像 , 单 击 一 个 标题 显示 一 张 图 像 。 

(3) 机 构 设 置 

机 构 设 置 模块 链接 到 一 个 普通 网 页 ,网 页 的 主要 内 容 是 一 张 机 构 设置 图 。 
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(4) 办 公 电 话 查询 

办 公 电 话 查询 模块 链接 到 一 个 关于 办 公 电 话 的 Word 文档 。 

(5) 校 历 

校 历 模块 链接 到 一 个 关于 校 历 的 Excel 文档 。 

(6) 计算 机 系 

计算 机 系 模块 链接 到 一 个 框架 集 网 页 ,要求 一 边框 架 显示 子 菜单 ,一 边框 架 显示 对 应 的 
网 页 内 容 。 计 算 机 系 包含 3 个 子 菜单 :“ 专 业 介 绍 ”“ 教 师 队 伍 ” 和 “文件 下 载 "。“ 专 业 介 
绍 " 和 “教师 队伍 ”的 内 容 以 网 页 的 形式 呈现 ,网 页 上 显示 图 文 信息 ;“ 文 件 下 载 " 也 链接 到 一 
个 普通 网 页 ,网 页 上 显示 若干 个 文件 标题 ,每 个 标题 都 链接 到 对 应 的 文件 , 单 击 标题 的 时 候 
可 以 下 载 该 文件 。 

(7) 经 济 系 

经 济 系 模块 链接 到 一 个 框架 集 网 页 ,要 求 同 计算 机 系 。 

(8) 人 文 社 科 系 

人 文 社 科 系 模块 链接 到 一 个 框架 集 网 页 ,要求 同 计算 机 系 。 

(9) 教务 处 

教务 处 模块 链接 到 一 个 框架 集 网 页 ,要 求 一 边框 架 显示 子 菜单 ,一 边框 架 显示 对 应 的 网 
页 内 容 。 教 务 处 包含 两 个 子 菜单 :“ 部 门 简介 ”和 “人 员 职 责 ”"。 对 应 的 内 容 都 以 网 页 的 形式 
呈现 ,网 页 上 显示 图 文 信息 。 

(10) 学 生 处 

学 生 处 模块 链接 到 一 个 框架 集 网 页 ,要求 一 边框 架 显示 子 菜单 ,一 边框 架 显 示 对 应 的 网 
页 内 容 。 学 生 处 包含 3 个 子 菜单 :“ 部 门 简介 ”“ 就 业 指 导 ” 和 “心理 健康 ”。 对 应 的 内 容 都 
以 网 页 的 形式 呈现 ,网 页 上 显示 图 文 信息 。 

(11) 财务 科 

财务 科 模 块 链接 到 一 个 框架 集 网 页 ,要 求 一 边框 架 显示 子 菜单 ,一 边框 架 显 示 对 应 的 网 
页 内 容 。 财 务 科 包含 3 个 子 菜单 :“ 岗 位 职责 "“ 收 费 公 示 ” 和 “所 得 税 说 明 ”。*“ 岗 位 职责 ” 
和 “收费 公示 ”对 应 的 内 容 都 以 网 页 的 形式 呈现 ,网 页 上 显示 图 文 信息 ;“ 所 得 税 说 明 ” 对 应 
的 页 面包 含 “ 什 么 是 工资 .薪金 所 得 ”“ 税 率 表 ” 和 “应 纳税 额 计算 公式 ”3 个 标题 ,并 使 用 命 
名 锚 记 的 形式 将 3 个 标题 分 别 链接 到 网 页 中 对 应 的 3 个 位 置 。 
(12) 新 闻 中 心 
新 闻 中 心 模块 链接 到 一 个 普通 网 页 ,网 页 上 显示 新 闻 标 题 ,每 个 标题 带 有 超 链 接 , 单 击 
后 将 打开 一 个 普通 网 页 ,显示 对 应 的 新 闻 内 容 。 
(13) 通知 公告 
通知 公告 模块 链接 到 一 个 普通 网 页 ,网 页 上 显示 通知 公告 标题 ,每 个 标题 带 有 超 链接 ， 
单 击 后 将 打开 一 个 普通 网 页 ,显示 对 应 的 通知 公告 内 容 。 
(14) 科研 工作 
科研 工作 模块 链接 到 一 个 框架 集 网 页 ,要求 一 边框 架 显示 子 菜单 ,一 边框 架 显示 对 应 的 
网 页 内 容 。 财 务 科 包 含 两 个 子 菜 单 :“ 部 门 职责 "和 “下 载 专区 ”。“ 部 门 职责 ”对 应 的 网 页 显 
示 图 文 信息 ;“ 下 载 专区 ”对 应 的 网 页 显示 所 有 可 下 载 文 件 的 标题 ,标题 带 有 超 链接 , 单 击 链 
接 时 可 下 载 对 应 的 文件 。 
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(15) 中 国教 育 信息 网 

链接 到 中 国教 育 信 息 网 的 网 址 : http://www. chinaedu. edu. cn/ 。 
(16) 中 国教 育 在 线 

链接 到 中 国教 育 在 线 的 网 址 : http://www. eol. cn/ 。 

4. 开发 日 程 计 划 

开发 日 程 计 划 如 表 7-1 所 示 。 


表 7-1 开发 日 程 计划 示例 


日 期 任务 人 员 目 标 
1 月 1 日 、 | 与 客户 进行 界面 讨论 ,设计 并 制作 网 页 完成 主页 和 所 有 子 页 
1 月 31 日 | 界面 双方 各 1~2 人。 | 的 界面 制作 
2 月 1 日 一 | 制作 网 站 的 南面 ,同时 客户 准备 网 页 中 所 | 直人 7。 人 | 完成 主页 和 所 有 于 
3 月 31 日 | 需要 的 文字 和 图 片 等 基本 资料 的 制作 
1 月 1 1 。 | 客户 提供 更 多 的 网 站 信息 资料 ,开发 方 
， 胃 志和。 | 客户 方 共同 对 网 页 的 信息 进行 完善 和 编 | 双方 各 1~2 人 | 完成 网站 的 内 部 发 布 

辑 , 最 终 将 完整 的 网 站 传 至 Web 服务 器 
4 月 18 日 一 | 客户 试用 网 站 ,如 发 现 问题 ,由 开发 方 进行 | 客户 方 人 员 不 限 ,| 
5 月 15 日 “| 修改 开发 方 1~2 人 | 完成 网 站 的 基本 测试 


注意 : 表 7-1 只 是 一 个 简易 的 开发 日 程 计划 示例 ,具体 的 日 程 计 划 因 每 个 网 站 开发 公 
司 要 求 的 不 同 而 不 同 。 


二 全 任务 7.1 


内 容 : 假设 本 节 提 出 的 16 个 网 站 功能 模块 及 其 细节 要 求 为 校园 网 站 的 需求 ,以 此 为 基 
本 框架 编写 校园 网 站 的 需求 分 析 报告 。 

提示 : 为 了 保证 后 续 任务 和 知识 点 的 连贯 性 ,如 果 需 要 调整 需求 , 则 可 调整 系 部 数量 ， 
同时 每 个 网 页 的 表现 形式 不 要 变动 。 


7.2 界面 设计 


在 2.2 节 中 讨论 了 界面 设计 的 原则 ,并 介绍 了 Fireworks 的 基本 工具 及 其 应 用 操作 ,在 
本 节 中 ,将 进一步 介绍 关于 界面 设计 细节 的 技术 问题 ,主要 包括 LOGO 设计 和 图 像 处 理 。 


7.2.1 LOGO 设 计 


在 一 个 网 页 的 界面 中 ,LOGO 是 最 重要 的 组 成 部 分 之 一 。 设 计 好 一 个 LOGO, 包 含 颜 
色 , 结 构 、 人 文 .软件 技术 等 多 方面 的 知识 。 本 节 只 从 Fireworks 软件 应 用 技术 方面 ,对 网 站 
LOGO 的 设计 进行 曾 述 。 

1. 图 层 及 “图 层面 板 

图 层 是 Fireworks 中 的 一 个 重要 概念 ,一 个 图 层 就 相当 于 一 张 含 有 文字 或 图 像 信 息 的 
胶片 ,多 张 图 层 重生 在 一 起 能 够 组 成 内 容 丰 富 的 图 像 。 在 Fireworks 中 创建 的 图 像 一 般 都 
包含 多 个 图 层 , 每 个 图 层 包 含 不 一 样 的 文字 和 图 像 。 
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在 Fireworks 操作 界面 中 ,提供 了 * 图 层 "面板 ,以 方 本 - 本 时 
便 对 图 层 进行 选择 操作 。 单 击 “ 窗 口 ”菜单 ,选择 “ 层 ” 菜 
单项 , 即 可 打开 “图 层 ” 面 板 , 如 图 7-2 所 示 ; 或 者 直接 按 
F2 键 打开 或 关闭 图 层面 板 。 

图 层 的 基本 操作 包括 选择 图 层 、 锁 定 图 层 、 隐 藏 / 显 
示 图 层 、 新 建 图 层 、 删 除 图 层 、 调 整 图 层 顺序 等 。 

(1) 选择 图 层 

单 击 “ 图 层 ” 面 板 上 的 某 一 层 ,可 选中 该 图 层 中 包含 Ee 
的 所 有 对 象 。 一 个 图 像 的 编辑 窗口 中 往往 包含 了 多 个 重 
秋 的 对 象 ,有 了 时候 选择 某 一 个 对 象 会 比较 困难 ,尤其 是 当 
这 个 对 象 在 其 他 对 象 背 后 时 。 而 通过 “图 层 ” 面 板 来 选择 ,就 能 解决 这 样 的 问题 。 

(2) 锁定 图 层 

对 图 像 编辑 窗口 中 的 某 个 图 层 对 象 进行 编辑 时 ,可 能 会 影响 到 其 他 图 层 对 象 ,这 时 如 果 
把 不 希望 被 改动 的 图 层 锁定 ,就 不 会 出 现 这 样 的 问题 。 单 击 图 层 前 面 印 | 两 个 标记 框 中 的 
第 二 个 ,出 现 |@| 标 记 ,表示 该 图 层 被 锁定 ,在 图 像 编辑 窗口 中 不 能 对 该 图 层 的 所 有 对 象 进行 
编辑 。 

(3) 隐藏 /显示 图 层 

单 击 图 层 前 面部 | 两 个 标记 框 中 的 第 一 个 ,使 之 变 为 门 , 表 示 将 该 图 层 隐 藏 ,在 图 像 纺 
辑 窗口 中 就 看 不 到 该 图 层 的 所 有 对 象 。 

(4) 新 建 图 层 

在 “图 层 ” 面 板 中 ,图 层 分 为 两 大 类 : 网 页 层 和 普通 层 。 网 页 层 主要 包含 切片 信息 ,普通 
层 包含 图 像 信息 。 在 普通 层 下 ,又 分 出 位 图 层 和 直线 层 . 路 径 层 , 文 字 层 等 各 种 矢量 层 。 在 
图 像 编辑 窗口 中 添加 一 个 位 图 或 一 个 矢量 对 象 , 普 通 层 下 就 会 新 建 一 个 图 层 , 用 来 “ 装 " 新 建 
的 对 象 。 

(5) 删除 图 层 

选择 一 个 图 层 , 单 击 “图 层 ” 面 板 下 方 的 “删除 所 选 " 按 钮 加 ,该 图 层 即 被 删除 ,图 层 中 包 
含 的 对 象 就 从 图 像 中 消失 。 

(6) 调整 图 层 顺 序 
“图 层 ?面板 中 ,图 层 的 顺序 影响 图 像 的 显示 效果 。 如 果 图 层 A 在 图 层 B 之 上 ,那么 在 

一 a 图 像 中 ,图 层 A 包含 的 对 象 将 显示 在 图 层 B 对 象 的 前 面 ,并 
记 而 且 有 可 能 把 它 挡住 。 所 以 在 编辑 图 像 时 ,要 注意 图 层 的 顺 
加 ee 序 .调整 图 层 顺 序 的 操作 : 选择 某 个 图 层 , 按 住 鼠 标 左 键 不 
门 放 并 上 下 拖 动 , 当 目标 位 置 出 现 一 个 粗 线条 时 松 开 鼠 标 左 键 
( 见 图 7-3) ,这 时 图 层 就 被 插入 到 该 位 置 。 当 一 个 图 层 被 往 上 

9 7-3 “ 抢 动 图 层 调整 图 层 顺 序 ”调整 时 ,该 图 层 包 含 的 对 象 在 图 像 中 的 显示 位 置 就 会 靠 前 。 

2. 滤 镜 

滤 镜 用 来 实现 图 像 的 各 种 特殊 效果 , 它 的 使 用 方法 很 简单 ,但 是 想 要 使 用 滤 镜 让 图 
像 呈 现 出 完美 的 效果 ,还 需要 配合 其 他 的 图 像 制作 技术 以 及 对 图 像 设计 效果 的 良好 想 
象 力 。 
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(1)“ 滤 镜 ” 面 板 
在 Fireworks 中 , 当 图 像 编 辑 窗 口中 选择 某 个 对 象 时 ,在 属性 面板 上 一 般 都 可 以 找到 
“ 滤 镜 ”面板 。 单 击 “ 滤 镜 ” 面 板 中 的 按钮 二 , 打 开 滤 镜 的 选择 菜单 ,可 以 看 到 不 同类 别 的 滤 
镜 ,如 图 7-4 所 示 。 滤 镜 可 以 应 用 在 图 像 中 不 同类 型 的 对 象 上 ,包括 各 种 位 图 和 矢量 对 象 。 
(2) 添加 滤 镜 
选择 图 像 编辑 窗口 中 的 某 个 对 象 ,在 * 滤 镜面 板 上 单 击 志 按钮 ,选择 某 个 类 型 的 滤 镜 ， 
比如 * 阴 影 和 光 晕 ?中 的 “投影 ”, 然 后 会 弹出 对 应 的 滤 镜 效果 设置 窗口 (图 7-5 是 投影 效果 的 
设置 窗口 )。 在 设置 窗口 中 对 各 个 选项 进行 调整 ,可 以 在 细节 上 改变 滤 镜 效果 。 
无 
选项 
世 它 
到 角 和 避风 


寻 点 
模糊 


调整 颜色 
锐 亿 
阴影 和 光量 


Photoshop 动态 效果 


图 7-4 滤 镜 列表 图 7-5 某 滤 镜 效果 设置 窗口 


添加 了 某 个 滤 镜 之 后 , 滤 镜 的 名 称 就 会 出 现在 * 滤 镜 ” 面 板 中 ,如 图 7-6 所 示 。 
注意 ,在 同一 个 对 象 上 ,添加 滤 镜 的 顺序 不 同 ,对 象 的 效果 也 不 同 。 如 图 7-7 所 示 , 左 图 和 
右 图 分 别 是 添加 "投影 "和 "* 光 党 ?及 添加 * 光 党 "和 "投影 "的 效果 ,可 以 看 出 两 个 效果 是 不 同 的 。 
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图 7-6 滤 镜 面板 图 7-7 滤 镜 顺序 不 同 而 产生 不 同 的 效果 


(3) 修改 滤 镜 
修改 滤 镜 指 对 某 个 滤 镜 效果 的 细节 进行 修改 。 双 击 * 滤 镜 ” 面 板 中 已 添加 的 滤 镜 , 即 可 
打开 滤 镜 细节 设置 窗口 。 
(4) 删除 滤 镜 
选择 滤 ?” 镜 面板 上 某 个 已 添加 的 滤 镜 , 单 击 面板 上 方 的 一 按钮 , 即 可 删除 该 滤 镜 效果 。 
3. 其 他 图 形 
在 Fireworks 的 “矢量 ?工具 面板 上 ,除了 前 面 介 绍 的 “矩形 ”工具 之 外 ,还 提供 了 其 他 的 
图 形 工具 。 单 击 * 和 矩形? 工具 按钮 右 下 角 的 黑色 
小 三 角形 ,会 弹出 一 个 图 形 选 择 菜 单 , 除 了 矩形 
之 外 ,还 包含 了 椭圆 形 、 多 边 形 、L 形 、 星 形 等 多 校园 
种 图 形 。 单 击 其 中 的 某 一 种 图 形 , 在 图 像 编辑 窗 | 网 站 
口中 拖 动 , 就 能 绘制 出 相应 的 图 形 。 让 
【案例 演示 7-1】 制作 图 7-8 所 示 的 LOGO 
效果 。 图 7-8 LOGO 示例 
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(1) 在 Fireworks 中 ,新 建 一 个 300X150 像素 大 小 的 图 像 ,为 设置 画布 背景 色 , 然 后 保 
存 图 像 文 件 (png 格式 ) 。 

(2) 选择 “ 星 形 ” 工 具 圳 ,在 图 像 编辑 窗口 中 绘制 两 个 星 形 , 并 分 别 设置 不 同 的 填充 色 。 

(3) 选择 “连接 线形 "工具 ,在 图 像 编辑 窗口 中 绘制 一 个 连接 线 ,调整 它 和 星 形 的 相对 
位 置 。 

(4) 选择 连接 线 , 添 加 滤 镜 效果 * 光 晕 ”, 把 光量 设置 为 白色 。 

(5) 分 别 输入 文字 “校园 "和 “网 站 ”, 调 整 文字 的 字体 、 颜 色 和 大 小 ,并 调整 两 个 文本 块 
的 位 置 。 

(6) 分 别 选中 两 个 文本 块 , 设 置 滤 镜 效果 为 “投影 ”。 

4.“ 钢 笔 " 工 具 

单 击 “ 矢 量 " 工 具 面 板 上 的 “钢笔 ”工具 密 ,光标 将 变 成 钢笔 的 形状 。 使 用 “钢笔 ”工具 在 
图 像 编辑 窗口 上 单 击 拖 动 ,可 以 绘制 出 直线 或 曲线 。 钢 笔画 出 的 对 象 也 称 作 路 径 。 

(1) 绘制 直线 

在 图 像 编辑 窗口 上 单 击 , 画 下 直线 的 起 始点 ,再 换 一 个 位 置 单 击 , 画 下 直线 的 结束 点 ,两 
点 之 间 就 形成 一 条 直线 。 如 果 在 多 个 不 同 的 位 置 单 击 , 就 会 生成 一 条 折线 ,如 图 7-9 所 示 。 
当 要 介绍 线条 绘制 时 ,只 要 双击 就 表示 绘制 介绍 。 

(2) 绘制 曲线 

曲线 由 3 个 点 来 确定 形状 。 在 图 像 编 辑 窗口 上 ,首先 , 单 击 以 确定 曲线 的 起 始点 ; 再 换 
一 个 位 置 按 住 鼠标 左 键 不 放 并 拖 动 ,确定 曲线 的 中 间 点 ,同时 还 可 以 调整 曲线 的 弯曲 度 , 然 
后 松 开 鼠标 左 键 ; 接着 ,选择 第 3 个 点 的 位 置 , 单 击 以 确定 曲线 的 结束 点 。 这 样 ,3 点 之 间 就 
形成 一 条 曲线 ,图 7-10 所 示 为 心 形 曲 线 。 当 要 绘制 下 一 段 曲 线 时 ,上 一 段 曲线 的 结束 点 将 
作为 下 一 段 的 起 始点 。 


图 7-9 用 钢笔 绘 出 的 折线 图 7-10 钢笔 绘制 的 心 形 


如 果 要 完成 整个 曲线 图 形 的 绘制 ,只 要 双击 即 可 。 或 者 当 最 后 一 个 点 与 整个 图 形 的 起 
始点 重合 时 ,钢笔 的 右 下 角 会 出 现 一 个 小 小 的 空心 圆 ,这 时 单 击 也 会 完成 图 形 的 绘制 。 

(3) 调整 图 形 

使 用 “选择 ”工具 必 可 以 选择 钢笔 绘制 的 图 形 , 并 挪动 它 。 如 果 使 用 的 是 蝙 工具 , 则 可 
以 调整 图 形 的 形状 ,具体 操作 方法 是 : 首先 ,使 用 疙 工具 选择 图 形 ; 然后 ,图 形 上 会 出 现 若 
干 个 小 白 点 , 拖 动 这 些 点 就 可 以 改变 图 形 的 形状 。 
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5. 文字 的 特殊 处 理 

(1) 特殊 字体 

在 作 图 的 时 候 , 有 时 需要 一 些 特殊 的 字体 来 修改 图 像 上 的 文字 ,这 需要 在 计算 机 上 安装 
特效 字体 。 首 先 , 从 网 络 上 下 载 特效 字体 ,一 般 
它们 是 图 7-11 所 示 的 特殊 文件 ; 然后 ,复制 一 个 
要 安装 的 特效 字体 文件 ,再 打开 “我 的 电脑 ”资源 
管理 器 ,进入 C:\WINDOWS\Fonts 这 个 目录 下 
进行 粘贴 ,这 时 会 出 现 “ 安 装 字体 进度 ”提示 框 ， 人 二 二审 


提示 框 消失 后 就 表示 完成 特效 字体 的 安装 。 下 rE 

次 再 打开 Fireworks 时 ,就 可 以 在 字体 列表 中 看 

到 特效 字体 。 CE 
人 图 7-11 安装 特殊 字体 


文字 的 显示 方向 一 般 不 是 水 平 就 是 垂直 ,而 
通过 使 用 * 附 加 到 路 径 ” 命 令 可 以 改变 其 显示 的 方向 。 首 先 ,输入 文字 (比如 * 校 园 网 站 ”); 
其 次 ,使 用 "钢笔 ?工具 , 画 出 一 个 弯曲 的 路 径 ; 然后 ,选择 文字 ,再 按 Shift 键 , 同 时 用 选择 曲 
线路 径 , 这 样 ,两 个 对 象 都 处 于 被 选中 的 状态 ; 最 后 ,选择 “文本 ”>“ 附 加 到 路 径 ” 命 令 。 

使 用 疾 工 具 , 调 整 路 径 的 形状 ,可 调整 文本 的 排列 效果 ,效果 如 图 7-12 所 示 。 

(3) 把 文字 转换 为 路 径 

把 文字 转换 为 路 径 之 后 ,可 以 对 每 一 个 文字 的 形状 进行 自由 调整 。 首 先 ,输入 文字 ( 比 
如 “校园 网 站 ”); 然后 ,选中 文字 ,再 选择 "文本 ”一 “转换 为 路 径 " 命 令 ; 最 后 ,使 用 “部 分 选 
定 ” 工 具 财 , 单 击 每 一 个 文字 , 拖 动 文字 上 的 白色 小 方块 ,就 可 以 改变 文字 的 外 形 了 ,如 图 7-13 
所 示 。 


图 7-12 调整 文本 的 排列 效果 图 7-13 改变 文字 的 形状 


(4) 改变 大 小 

改变 文字 的 大 小 有 两 种 方式 。 第 一 种 方式 是 选中 文字 ,使 用 属性 面板 上 的 “大 小 ”属性 
进行 设置 ; 第 二 种 方式 是 使 用 “工具 ”面板 中 的 “缩放 ”工具 项 ,选中 文字 之 后 , 单 击 “缩放 ” 
工具 ,文字 就 处 于 可 缩放 状态 , 拖 动 文字 四 周 的 黑色 小 方块 就 可 以 改变 文字 的 大 小 。 

(5) 使 用 “样式 ”面板 

Fireworks 中 的 “样式 ”面板 提供 了 一 些 预 设 的 样式 ,可 用 来 修饰 文本 和 图 形 。 选 择 “ 窗 
口 ”>“ 样 式 ” 命 令 或 直接 按 Ctrl 十 F11 键 ,都 可 以 打开 “样式 ”面板 。 默 认 情 况 下 , “样式 ” 面 
板 是 空 的 。 

单 击 图 7-14(a) 中 的 “当前 文档 ” 右 侧 的 下 三 角 按钮 ,弹出 样式 类 型 菜单 ,如 图 7-14(b) 
所 示 。 在 其 中 选择 一 种 样式 类 型 “样式 ”面板 中 就 会 出 现 对 应 的 样式 ,如 图 7-14(c) 所 示 。 

选择 图 像 编辑 窗口 中 的 一 个 文本 块 ,再 单 击 “样式 ”面板 中 的 某 个 样式 ,文本 块 就 会 显示 


口 
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(a) 
7-14 样式 面板 


出 该 样式 所 设置 的 外 观 效果 ,如 图 7-15 所 示 。 


仪 四 网 站 


【案例 演示 7-2】 制作 如 图 7-16 所 示 的 两 个 LOGO 效果 。 


个 大 网 站 ”区 和 


gererwon9zhan nes DbreHkongdien.nesr 


图 7-16 LOGO 示 例 


图 7-16(a) 所 示 的 LOGO 的 制作 步骤 如 下 。 

@ 在 Fireworks 中 ,新 建 一 个 300X150 像素 大 小 的 图 像 ,为 设置 画布 背景 色 ,然后 保 
存 图 像 文 件 (png 格式 )。 

@ 在 图 像 上 输入 文字 “个 人 网 站 ”, 设 置 文 字 的 字体 、 颜 色 和 大 小 ,对 文字 使 用 特效 字体 
(假设 已 经 安装 ) 。 

@ 输入 文字 “gerenwangzhan. net”, 设 置 字体 、 颜 色 和 大 小 ,使 用 “钢笔 ”工具 绘制 一 个 
折线 的 路 径 , 再 同时 选中 文字 “gerenwangzhan. net” 和 路 径 , 使 用 “附加 到 路 径 ” 命 令 改变 文 
本 的 排列 方向 。 

图 7-16(b) 所 示 的 LOGO 的 制作 步 又 如 下 。 

g@ 在 Fireworks 中 ,新 建 一 个 300X150 像素 大 小 的 图 像 ,为 设置 画布 背景 色 ,然后 保 
存 图 像 文 件 (PNG 格式 ) 。 

@ 在 图 像 上 绘制 一 个 矩形 ,设置 矩形 的 填充 效果 ,然后 在 矩形 4 个 角 的 位 置 ,分 别 绘制 
4 个 面 圈 形 较 ,并 设置 面 圈 形 的 填充 色 跟 画布 的 背景 色 一 样 。 

@ 在 图 像 上 输入 文字 “个 人 空间 ”, 设 置 文字 的 字体 、 颜 色 和 大 小 ,把 文本 转换 成 路 径 ， 
并 改变 “个 人 ”两 字 的 形状 。 
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@ 对 “个 人 空间 ”使 用 某 种 样式 。 
@ 输入 文字 “gerenkongjian. net” ,设置 字体 、 颜 色 和 大 小 ,并 应 用 滤 镜 “ 斜 角 和 浮雕 ”中 
的 “ 凸 起 浮雕 ”效果 。 


< 任务 7.2 
内 容 : 应 用 本 节 介 绍 的 Fireworks 操作 技术 ,为 本 校 网 站 设计 并 制作 一 个 LOGO。 


7.2.2 图 像 处 理 


图 像 的 基本 处 理 技术 包括 改变 大 小 、 抠 图 .去除 背景 、 合 成 等 。 

1. 改变 大 小 

改变 图 像 的 大 小 有 两 种 情况 ,一 种 是 把 图 像 显 示 的 比例 变 大 或 变 小 , 另 一 种 是 将 图 像 的 
实际 尺寸 变 大 或 变 小 。 

改变 图 像 显 示 比 例 的 操作 步骤 是 : 单 击 图 像 编 辑 窗 口 下 方 的 “设置 缩放 比例 ” 按 
钮 095 ,在 弹出 列表 中 选择 一 个 百分比 ,调整 图 像 显 示 的 比例 。 当 一 个 图 像 较 小 ,而 又 
需要 对 它 进 行 细节 上 的 修改 时 ,往往 需要 通过 这 种 方式 使 图 像 显 示 比 例 放 大 ,便于 图 像 处 
理 。 注 意 ,显示 比 例 放 大 只 是 编辑 时 的 一 种 视觉 效果 而 已 ,并 没有 改变 图 像 的 实际 尺寸 ,所 
以 图 像 的 存储 空间 大 小 也 不 会 改变 。 

改变 图 像 实际 尺寸 的 操作 步骤 是 : 在 Fireworks 中 打开 图 像 文件 ,选择 “修改 ”一 “ 夯 
布 ">“ 图 像 大 小 ”命令 ,在 弹出 的 设置 对 话 框 (如 图 7-17 所 示 ) 中 输入 图 像 的 像素 尺寸 ; 如 
果 选 择 “约束 比例 ” 复 选 框 ,那么 只 须 输 入 宽 或 高 中 的 一 个 , 另 一 个 就 会 按 比 例 改 变 。 


00 由 信 来 _ 要 
rm | cr 


打印 尺寸 


4 4.167 * 光 
+ |4.167 || 英 二 v ja 


分 状 素 ;72 | 仁 / 英 二 ”六 | 


约束 比例 ES 
国 从 重新 取样 ) [ 双 立 方 习 


图 7-17 调整 图 像 大 小 


一 般 情况 下 ,在 改变 图 像 实际 尺寸 的 操作 中 ,只 提倡 把 大 图 变 小 ,反对 把 小 图 变 大 ,因为 
由 小 变 大 会 使 得 图 像 变 模糊 。 如 图 7-18 所 示 , 从 左 图 变 成 右 图 后 ,图 像 变 模糊 了 。 

2. 抠 图 

抠 图 指 的 是 从 一 张 图 像 中 ,把 需要 的 某 一 部 分 裁 取出 来 。 所 以 抠 图 的 第 一 个 操作 一 般 
是 先 选 取 图 像 中 的 一 部 分 ,这 就 需要 用 到 选取 工具 。 

Fireworks 提供 的 选取 工具 有 “和 矩形 选取 框 "工具 “椭圆 选取 框 " 工 具 、“ 套 索 ” 工 具 、“ 多 
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ES 


图 7-18 小 图 变 大 图 


边 形 套 索 ”工具 “钢笔 ”工具 。 

(1) “矩形 选取 框 ?工具 中 

单 击 Fireworks“ 位 图 工具 面板 中 的 下 ,光标 变 成 “十 ”的 形状 ,在 图 像 编辑 窗口 中 拖 
动画 出 一 个 矩形 选取 框 , 框 中 的 部 分 就 是 被 选取 的 部 分 。 

注意 两 个 问题 。 第 一 ,选取 的 时 候 , 一 定 要 确保 选 ，--------- 
中 了 目标 图 层 。 如 图 7-19 所 示 的 情况 ,矩形 选取 框 选中 ; | 
的 部 分 不 是 蝴蝶 ,而 是 “蝴蝶 ”文本 图 层 的 空白 处 。 正 确 
的 做 法 是 选中 右 图 中 的 “位 图 "图 层 。 第 二 , 当 图 像 中 有 ; | 
选取 框 存在 时 ,选择 “指针 ”工具 或 “部 分 选 定 " 工 具 , 在 一 
选取 框 外 部 鼠标 会 变 成 禁止 形状 @ ,表示 不 可 操作 ,这 局 [WE 
时 只 须 按 Esc 键 , 退 出 选取 状态 即 可 。 折 [ty 位 图 

使 用 其 他 选取 工具 的 时 候 , 同 样 要 注意 这 两 个 问题 。 

(2)“ 椭 圆 选取 框 " 工 具 司 

“矩形 选取 框 " 工 具 用 来 选取 一 个 方形 的 范围 ,而 “椭圆 选取 框 " 工 具 则 用 来 选取 一 个 辐 
形 的 范围 。 单 击 Fireworks“ 位 图 ”工具 面板 中 国 3 右 下 角 的 黑色 小 三 角 按钮 会 弹出 一 个 列 
表 , 选 择 其 中 的 “椭圆 选取 框 "工具 全 ,光标 变 成 “十 "形状 ,在 图 像 编辑 窗口 中 拖 动 画 出 一 个 
圆 形 选 取 框 , 框 中 的 部 分 就 是 被 选取 的 部 分 。 

(3)“ 套 索 " 工 具 面 

“和 撼 形 选取 框 ? 工 具 和 ”椭圆 选取 框 ? 都 用 来 选取 一 个 规则 形状 的 范围 ,而 * 套 索 工 具 ” 和 
“多 边 形 套 索 ?工具 则 用 来 选取 一 个 不 规则 形状 的 范围 。 单 击 Fireworks 工具 “位 图 ”工具 面 
板 中 的 名 ,光标 变 成 套 索 形状 ,在 图 像 编 辑 窗口 中 拖 动 ,可 任意 夯 出 一 个 形状 , 松 开 鼠 标 左 
键 就 生成 一 个 任意 形状 的 选取 框 , 框 中 的 部 分 就 是 被 选取 的 部 分 。 

(4)“ 多 边 形 套 索 工 具 罚 

单 击 Fireworks 工具 “位 图 ?工具 面板 中 钨 右 下 角 的 黑色 小 三 角 按 钮 会 弹出 一 个 列表 ， 
选择 其 中 的 “多 边 形 套 索 "工具 别 .光标 变 成 多 边 形 套 索 形状 ,在 图 像 编辑 窗口 中 不 断 地 单 
击 , 两 次 单 击 的 点 之 间 会 形成 一 条 直线 ,多 次 单 击 之 后 就 能 够 画 出 一 个 多 边 形 选取 框 , 框 中 
的 部 分 就 是 被 选取 的 部 分 。 


7-19 选取 对 象 时 要 选 对 图 层 
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(5)“ 钢 笔 ”工具 网 

“钢笔 ”工具 的 使 用 前 面 已 经 介绍 过 ,不 过 它 画 出 来 的 不 是 选取 框 。 把 钢笔 画 出 的 路 径 
变 成 选取 框 的 操作 步骤 是 : 首先 ,使 用 钢笔 沿 着 
要 选取 的 图 像 部 分 的 边缘 , 画 出 一 个 封闭 的 路 
径 ; 然后 ,选择 “修改 ”>“ 将 路 径 转换 为 选取 框 ” 边 缮 :清除 雇 贞 。。 呈 且 | 
命令 ,在 随后 弹出 的 对 话 框 (如 图 7-20 所 示 ) 中 ， 
保持 默认 设置 ,直接 单 击 “ 确 定 ” 按 钮 就 可 以 了 。 图 7-20 ”路径 转换 为 选取 框 

抠 图 的 时 候 , 如 果 选 取 的 部 分 是 规则 形状 ， 
那么 使 用 “和 矩形 选取 框 ” 工 具 或 “椭圆 形 选 取 框 "工具; 如果 是 不 规则 形状 ,那么 一 般 使 用 “ 钢 
笔 ” 工 具 。"“ 钢 笔 工 具 比 “ 套 索 ”或 “多 边 形 套 索 ”工具 更 方便 的 原因 有 两 个 : 使 用 钢笔 时 
不 用 一 直 按 住 鼠标 左 键 不 放 , 而 是 用 点 选 的 方式 ,操作 更 简便 ; 四 使 用 钢笔 画 好 路 径 之 后 ， 
还 可 以 通过 “部 分 选 定 ? 工 具 调整 路 径 的 形状 ,直至 满意 再 把 路 径 转换 为 选取 框 , 这 样 的 选取 
操作 更 灵活 。 

另外 , 抠 图 的 目的 一 般 有 两 个 : 把 裁 取 出 来 的 部 分 再 粘贴 回 原 图 ,使 得 原 图 变 成 两 
个 图 层 , 可 以 往 两 个 图 层 中 再 插入 其 他 对 象 ; @ 把 裁 取出 来 的 部 分 粘贴 到 其 他 图 像 中 
使 用 。 

【案例 演示 7-3】 如 图 7-21 所 示 ,将 左 图 中 的 咖啡 杯 抠 出 ,制作 出 右 图 的 效果 。 

(1) 在 Fireworks 中 ,打开 左 图 ,使 用 “钢笔 ”工具 沿 着 咖啡 杯 的 边缘 不 断 单 击 ,直到 面 
出 一 个 封闭 的 路 径 ( 如 图 7-22 所 示 ), 再 使 用 “部 分 选 定 ” 工 具 对 路 径 上 的 白色 小 方块 进行 微 
调 , 使 得 路 径 形 状 与 咖啡 杯 完全 一 致 。 


将 路 径 转换 为 选取 框 


图 7-21 抠 图 示例 图 7-22 使 用 钢笔 选取 图 形 


(2) 把 路 径 转换 为 选取 框 ,然后 按 Ctrl 十 C 键 ,把 选取 的 部 分 复制 下 来 。 

(3) 在 Fireworks 中 ,打开 右 图 ,然后 按 Ctrl 十 V 键 ,把 选取 的 部 分 粘贴 进去 。 粘 贴 的 时 
候 ,由 于 两 个 图 像 的 分 辩 率 不 一 样 ,所 以 会 弹出 一 个 警告 框 ,如 图 7-23 所 示 ,询问 “粘贴 的 图 
像 有 不 同 的 分 辩 率 。 是 否 对 图 像 重 新 取样 以 匹配 文档 ?”, 单 击 * 不 要 重新 取样 "按钮 ,保持 选 
取 部 分 的 大 小 。 
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Fireworks 


图 7-23 ”粘贴 图 像 时 的 取样 警告 


(4) 调整 粘贴 部 分 的 大 小 ,直到 和 图 7-21 右 图 的 效果 一 样 , 然 后 选择 咖啡 杯 , 应 用 滤 镜 
效果 “投影 ”。 

3. 去 除 背 景 

有 时 候 不 想 把 图 像 的 某 一 部 分 抠 出 来 ,而 只 是 想 把 图 像 中 一 些 不 需要 的 部 分 去 掉 , 比 如 
去 除 背 景 。 如 图 7-24 所 示 ,把 左 图 变 成 右 图 的 效果 。 

一 般 有 两 种 方法 能 够 解决 这 类 问题 ,一 种 使 用 “魔术 棒 ” 工 具 和 “橡皮 擦 "工具 ,一 种 使 用 
选取 工具 。 


图 7-24 去 除 背景 示例 


使 用 “魔术 棒 " 工 具 和 “橡皮 擦 ” 工 具 的 操作 方法 如 下 。 

(1) 单 击 “ 位 图 ”工具 面板 上 的 “魔术 棒 ” 工 具 淮 ,然后 单 击 图 像 上 的 背景 ,背景 即 被 选 
中 ,但 是 可 能 没有 把 整个 背景 都 选中 。 

(2) 这 时 ,属性 面板 上 显示 的 是 “魔术 棒 ” 工 具 的 属性 ,如 图 7-25 所 示 。 拖 动 属性 中 “ 容 
差 " 栏 右 侧 的 下 三 角 按钮 ,调整 容 差 值 。 当 容 差 越 大 时 ,魔术 棒 选 取 的 范围 越 大 ; 反之 则 选 
取 范 围 越 小 。 注 意 ,调整 容 差 时 要 选中 “动态 选取 框 " 复 选 框 。 


。 “ 聊 术 棒 ” 工 容 蕉 :|124 | 可 过 纺 | 实 边 ~ 
be 巴 动 夺取 民 
图 7-25 魔术 棒 属 性 面板 


(3) 调整 好 容 差 值 之 后 , 按 Delete 键 ,删除 选取 范围 的 内 容 ; 然后 继续 使 用 “魔术 棒 ” 工 
具 选 取 剩余 的 背景 ,继续 删除 ,直到 背景 被 删除 干净 。 

(4) 但 是 ,可 能 越 往 后 ,使 用 “魔术 棒 ” 工 具 选 取 的 范围 越 小 ,这 时 用 “魔术 棒 ” 工 具 显 得 
不 那么 方便 ,所 以 改 用 “橡皮 擦 " 工 具 。 单 击 “ 位 图 ”工具 面板 上 的 “橡皮 擦 "工具 一 ,光标 会 
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变 成 一 个 空心 圆圈 的 形状 ,在 属性 面板 上 设置 橡皮 擦 的 大 小 和 形状 ,如 图 7-26 所 示 。 


ESE 
2 Y 


“橡皮 控 ” 工 小 : 
ws: Ol 


字 具 


7-26 ”橡皮 擦 属性 面板 


(5) 按 住 鼠标 左 键 不 放 在 残留 的 图 像 背 景 上 拖 动 , 拖 动 过 的 地 方 即 被 擦 除 。 如 果 图 像 
太 小 ,可 以 把 图 像 的 显示 比例 放大 ,有 助 于 擦 除 操作 。 注 意 ,使 用 橡皮 擦 之 前 ,有 可 能 已 经 使 
用 魔术 棒 选 取 了 一 个 很 小 的 范围 而 没 被 发 觉 ,应 该 按 Esc 键 确保 退出 选取 状态 ,否则 使 用 橡 
皮 擦 将 不 起 作用 。 

以 上 是 使 用 “魔术 棒 ” 工 具 和 “橡皮 擦 "工具 的 方法 。 使 用 选取 工具 去 除 图 像 中 某 个 部 分 ， 
这 种 方法 的 操作 过 程 比较 简单 。 首 先 用 某 种 选取 工具 ,选取 图 像 上 要 去 除 的 范围 ,然后 按 
Delete 键 。 或 者 也 可 以 选取 图 像 上 不 去 除 的 范围 ,然后 选择 “选择 ”一 “反选 "命令 ,再 按 
Delete 键 。 

【案例 演示 7-4】 如 图 7-27 所 示 , 将 第 一 个 和 第 二 个 图 像 进行 处 理 , 制 作出 第 三 个 图 像 
的 效果 。 


图 7-27 图 像 处 理 综合 示例 


(1) 在 Fireworks 中 打开 第 一 张 图 像 , 选 取 其 中 一 部 分 后 复制 。 

(2) 新 建 一 个 图 像 文件 ,粘贴 刚才 选取 的 内 容 , 调 整 内 容 的 位 置 。 

(3) 打开 第 二 张 图 像 ,把 小 草 去 除 , 然 后 选择 整个 图 像 ,复制 并 粘贴 到 新 建 的 图 像 中 。 

(4) 在 新 建 的 图 像 中 ,选取 蝴蝶 后 剪 切 ,再 原 位 粘贴 回去 。 

(5) 继续 粘贴 蝴蝶 ,一 共生 成 3 只 。 选 中 一 只 蝴蝶 , 单 击 “缩放 ?工具 ,将 光标 移动 到 晴 
蝶 右 上 角 的 黑色 小 方块 上 方 , 变 成 一 个 半圆 箭头 的 时 候 , 拖 动 进行 旋转 ,改变 蝴蝶 的 方向 。 
用 同样 的 方法 编辑 其 他 蝴蝶 。 

(6) 对 蝴蝶 使 用 滤 镜 效果 “光泽 ”。 

(7) 把 图 像 上 网 忽 中 的 白色 部 分 去 除 。 

(8) 保存 新 建 的 图 像 。 

4. 合成 

图 像 合成 是 指 当 两 张 图 像 琶 放 在 一 起 时 ,使 用 特定 的 技术 让 它们 的 至 加 效果 显得 更 加 
自然 。 本 节 介 绍 的 图 像 合成 技术 主要 包括 混合 模式 和 蒙 版 应 用 。 
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(1) 使 用 混合 模式 

当 两 张 图 像 芭 放 在 一 起 的 时 候 , 选 择 上 面 那 张 图 像 ,再 单 击 属性 面板 上 “正常 " 栏 右 侧 的 
下 三 角 按钮 ,在 弹出 的 列表 中 选择 一 种 混合 模式 ,如 图 7-28 所 示 ， pj gf 一 一 司 
被 选中 的 模式 就 会 应 用 在 图 像 上 。 

Fireworks 提供 了 多 种 混合 模式 ,每 一 种 的 效果 如 何 使 用 ,本 图 7-28 混合 模式 
书 不 展开 阐述 。 一 些 混合 模式 的 作用 列举 如 下 。 

Q@ 正常 在 此 模式 下 ,图 像 会 以 原本 的 面貌 或 颜色 呈现 出 来 。 

@ 溶解 : 此 模式 会 以 随机 的 方式 重新 排列 编辑 图 像 或 者 当前 图 层 的 像素 ,以 产生 随机 


分 布 的 杂 点 效果 。 
加 变 亮 : 当下 层 图 像 的 色彩 比 当前 图 层 的 色彩 深 时 则 会 被 取代 ,反之 则 会 被 保留 。 此 
模式 适合 制作 光 晕 或 反光 的 效果 。 


@ 颜色 加 深 : 增加 绘图 像素 对 比 度 ,以 显示 绘制 颜色 ,用 白色 绘图 时 不 改变 底 色 。 

@ 线性 加 深 : 降低 绘图 像素 亮度 ,以 显示 绘制 颜色 ,用 白色 绘图 时 不 改变 底 色 。 

@ 颜色 减 淡 : 上 层 图 像 的 色彩 越 接近 白色 ,下 层 图 像 将 会 变 得 越 亮 ,但 黑色 部 分 不 受 
影响 。 总 体 来 说 ,使 用 该 模式 可 以 提高 图 像 的 亮度 ,适合 用 在 加 强 亮度 的 效果 上 。 

@ 线性 减 淡 : 此 模式 与 颜色 加 深 模式 相似 ,只 是 下 层 图 像 黑 色 部 分 也 会 受 影 响 。 

@ 全 加 : 此 模式 会 得 到 当前 图 层 图 像 的 色彩 与 下 层 图 像 的 色彩 进行 混合 的 效果 ,而 且 
可 以 让 图 像 的 暗 处 加 深 或 亮 处 增 亮 ,适合 在 加 强 对 比 度 和 提高 饱和 度 时 使 用 。 

@ 柔 光 : 此 模式 可 以 使 颜色 变 亮 或 是 变 暗 , 具 体 效 果 取 决 于 混合 色 。 如 果 当 前 图 层 图 
像 的 色彩 超过 50% 的 灰色 ,下 层 图 像 会 变 暗 ; 如 果 当 前 图 层 的 色彩 低 于 50%, 下 层 的 图 像 
会 变 亮 。 

@@ 强 光 : 此 模式 是 柔 光 的 增强 版 ,同样 可 以 使 颜色 加 深 或 增 亮 ,但 最 大 的 区 别 在 于 强 
光 模 式 产生 纯 黑色 或 纯 白 色 ,而 柔 光 模 式 则 不 能 。 

@ 亮光 : 如 果 绘 图 颜色 大 于 50% 灰 度 , 则 以 颜色 加 深 模式 混合 ,可 使 图 变 暗 ; 反之 ,如 
果 绘 图 颜色 小 于 50% 灰 度 , 则 以 颜色 减 淡 模 式 混合 ,可 使 图 变 亮 。 

@ 线性 光 : 如 果 绘 图 颜色 大 于 50% 灰 度 , 则 以 线性 加 深 模式 混合 ,使 图 像 变 暗 ; 反之 ， 
如 果 绘 图 颜色 小 于 50% 灰 度 , 则 以 线性 减 淡 模 式 混合 ,可 使 图 变 亮 。 

图 点 光 : 如 果 绘图 颜色 大 于 50% 灰 度 , 亮 像 素 将 被 代替 , 暗 像 素 不 变 ; 反之 如 果 绘 图 
颜色 小 于 50%% 灰 度 , 则 暗 像素 将 被 代替 , 亮 像素 不 变 , 这 种 模式 可 用 于 对 图 像 添加 特殊 
效果 。 

@ 差异 : 此 模式 会 根据 当前 图 层 图 像 色 彩 的 明亮 度 来 对 调 下 层 图 像 的 色彩 。 如 果 当 
前 图 层 图 像 的 色彩 是 白色 , 则 下 面 图 层 对 应 的 图 像 色彩 会 被 进行 反 相 的 动作 ; 如 果 当 前 图 
层 图 像 的 色彩 是 黑色 ,那么 下 层 中 对 应 的 图 像 色彩 将 不 会 有 任何 变化 ; 而 介 于 白色 和 黑色 
之 间 的 颜色 , 则 会 根据 对 应 的 色彩 分 别 进行 不 同 程度 的 反 相 处 理 。 此 种 混合 模式 的 结果 是 
最 难 预料 的 一 种 ,所 以 常会 出 现 令 人 惊叹 的 效果 ,此 模式 一 般 用 于 模拟 原始 设计 的 底片 ,或 
是 用 于 制作 气氛 诡异 的 作品 。 

四 排除 : 此 模式 的 处 理 方式 与 差异 十 分 相似 ,唯一 不 同 的 是 该 模式 会 将 当前 图 层 图 像 
中 明亮 度 中 等 的 色彩 所 对 应 的 下 层 图 像 变 成 灰色 ,因而 产生 的 效果 不 如 差异 ,明显 感觉 较为 
柔和 。 
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四 色相 : 此 模式 会 保留 当前 图 层 图 像 色彩 的 色 度 , 然 后 与 下 层 图 像 色彩 的 饱和 度 和 亮 
度 进行 混合 ,也 就 是 说 下 层 图 像 色 彩 的 色 度 将 不 会 改变 。 

@@ 饱和 度 : 此 模式 会 保留 当前 图 层 图 像 色彩 的 饱和 度 ,然后 与 下 层 图 像 色 彩 的 亮度 进 
行 混合 ,也 就 是 说 下 层 图 像 色 彩 的 饱和 度 将 不 会 改变 。 

@@ 颜色 : 此 模式 会 保留 当前 图 层 图 像 色彩 的 色 度 及 饱和 度 , 然 后 与 下 层 图 像 色彩 的 亮 
度 进行 混合 ,所 以 下 层 图 像 色彩 的 亮度 并 不 会 改变 。 

外 亮度 : 此 模式 与 颜色 模式 相反 , 它 会 保留 当前 图 屋 图 像 色 彩 的 亮度 ,然后 与 下 面 图 
屋 的 色 度 、 饱 和 度 进行 混合 ,因此 下 面 图 层 的 色 度 、 饱 和 度 并 不 会 改变 。 

(2) 应 用 蒙 版 

蒙 版 可 以 看 做 是 一 种 遮挡 ,通过 蒙 版 的 遮挡 可 以 使 两 张 重生 的 图 像 呈 现 出 自然 的 融合 
效果 ,如 图 7-29 所 示 。 下 面 介 绍 如 何 使 用 蒙 版 。 


7-29 蒙 版 应 用 示例 


首先 ,打开 “图 层 ” 面 板 , 找 到 两 张 图 像 对 应 的 图 层 ,选择 县 放 在 上 面 的 那个 图 层 , 单 击 
“图 层 ” 面 板 下 方 的 “添加 蒙 版 ”按钮 贺 ,这 样 就 添加 了 一 局 
个 蒙 版 在 图 层 中 ,如 图 7-30 所 示 。 回 ET 

然后 ,对 蒙 版 进行 填充 。 在 图 层 中 选中 蒙 版 (此 时 蒙 
版 的 边框 是 绿色 的 ) ,在 “颜色 ”工具 面板 中 找到 克 按钮 ， EE 避 加 加 区 语 
单 击 它 右 下 角 的 黑色 小 箭头 ,选择 “渐变 ”工具 国 . 在 图 
像 上 拖 动 出 一 条 直线 , 蒙 版 就 被 填充 了 渐变 的 效果 ,从 而 
添加 了 蒙 版 的 图 层 也 产生 了 渐变 的 效果 。 

注意 ,填充 前 一 定 要 选中 蒙 版 ,而 不 是 蒙 版 左 侧 的 位 妨 ! Se BRB3 | 
图 图 标 。 另外 ,在 填充 时 ,起 始点 最 好 在 图 像 的 边界 上 靠 图 7-30 添加 蒙 版 
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内 ,这 样 填充 之 后 ,边界 的 淡化 效果 更 好 。 

在 选择 “渐变 "工具 的 渐变 效果 时 ,也 要 根据 实际 需求 来 决定 。 图 7-29 中 使 用 的 是 线性 
的 渐变 效果 。 
人 ~ 任务 7.3 

内 容 : 应 用 本 节 中 的 图 像 处 理 技术 ,对 任务 7. 2 中 设计 的 LOGO 再 进行 编辑 加 工 , 完 
善 LOGO 的 效果 。 
7.2.3 设计 主页 界面 


根据 校园 网 站 的 需求 分 析 ,进行 主页 界面 设计 ,页 面 整体 效果 不 能 太 花哨 ` 尽 量 简洁 ,要 
符合 校园 网 站 这 个 主题 ,并 且 具 有 校园 的 青春 气息 。 效 果 如 图 7-31 所 示 。 
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图 7-31 校园 网 站 主页 界面 


制作 步骤 如 下 。 

(1) 在 Fireworks 中 ,新 建 一 个 950X780 像素 的 图 像 文 件 , 保 存 图 像 (png 格式 ) ,作为 
校园 网 站 的 主页 界面 图 。 

(2) 在 主页 界面 图 左上 角 制 作 网 站 LOGO。 输 入 “ 某 某 学 院 ”" 和 “POLYTECHNIC”, 设 置 
文本 的 大 小 分 别 为 45 和 30, 然 后 使 用 不 同 的 样式 修饰 “ 某 某 学 院 ” 和 “POLYTECHNIC”。 
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(3) 使 用 “直线 ”工具 ,在 “POLYTECHNIC” 左 侧 画 出 3 条 直线 ,分 别 设置 颜色 为 
井 000000、 井 666666、# CCCCCC ,并 分 别 设置 笔尖 大 小 为 3.2、2 , 描 边 种 类 是 “1 像素 硬化 ”。 
网 站 LOGO 完成 。 

(4) 在 主页 界面 图 右上 角 制 作 导航 栏 。 分 别 输入 “学 校 概况 ”"“ 公 共 服 务 "“ 系 部 导 
航 ”“ 部 门 导 航 "“ 新 闻 中 心 *“ 通 知 公告 >“ 科研 工作 ”, 设 置 大 小 、 颜 色 、. 字 体 分 别 为 20、 
#666666 和 楷体 。 使 用 "对齐 ?面板 将 这 7 个 标题 对 齐 。 

(5) 另外 打开 两 张 校园 图 像 , 分 别 对 它们 进行 部 分 选取 ,然后 复制 并 粘贴 到 主页 界面 
图 中 。 

(6) 在 主页 界面 图 中 ,将 两 张 校园 图 像 交叉 重 肆 ,选取 上 面 一 张 , 添 加 蒙 版 ,并 对 蒙 版 进 
行 渐变 填充 ,淡化 两 张 图 像 交 叉 的 边界 ,使 重 友 效果 更 自然 一 些 。 

(7) 使 用 “钢笔 ”工具 ,在 主页 界面 图 中 心 部 位 的 区 域 绘制 波浪 形 的 封闭 路 径 。 设 置 填 
充 色 和 线条 颜色 分 别 为 #2D7CFF 和 井 FFFFFF ,填充 纹理 为 20% 的 “烟雾 效果 ”, 笔 尖 大 小 
为 4, 描 边 种 类 为 “1 像素 柔 化 ”。 

(8) 在 波浪 形 路 径 下 绘制 一 个 矩形 ,设置 填充 色 为 #E7EAF0, 线 条 颜色 无 ,填充 纹理 为 
17% 的 “网 格 线 6”。 在 “图 层 ” 面 板 中 ,把 矩形 层 调 到 波浪 形 路 径 层 的 下 面 ,让 其 谈 住 矩形 的 
上 端 。 

(9) 输入 “用 户 登 录 ”、“ 用 户 名 ”“ 密 码 ”, 设 置 字体 、 大 小 和 颜色 分 别 为 楷体 、20、 
#FFFFFF。 

(10) 绘制 登录 区 域 的 两 个 矩形 ,设置 宽 和 高 分 别 为 125 和 23 ,填充 色 为 无 ,线条 色 为 
#FFFFFF ,笔尖 大 小 为 1, 描 边 种 类 为 1 像素 柔 化 ”。 

(11) 绘制 “登录 ”和 “取消 "两 个 矩形 ,设置 宽 和 高 分 别 为 61 和 19, 填 充 色 为 # CCCCFF， 
线条 色 无 ; 然后 在 两 个 矩形 上 分 别 输入 “登录 ”和 “取消 ”, 字 体 、 颜 色 、 大 小 分 别 为 楷体 、 
#333333、15。 

(12) 绘制 “友情 链接 ”区 域 的 矩形 ,设置 宽 和 高 分 别 为 282 和 147, 填充 色 为 
#FFFFFF ,不 透明 度 为 30 ,线条 色 无 , 圆 度 为 10%。 

(13) 输入 “友情 链接 ”, 设 置 颜色 .大 小 .字体 分 别 为 并 336699、20、 楷 体 。 

(14) 在 “友情 链接 ?前 绘制 一 个 面 圈 形 ,设置 填充 色 为 #488DFF ,线条 色 无 , 宽 和 高 均 
为 18。 
(15) 输入 “新 闻 中 心 ” 和 “通知 公告 ”, 设 置 字体 、 大 小 和 颜色 分 别 为 楷体 、20、# 
FFFFFF。 在 这 两 个 文本 块 前 面 .分 别 导入 两 个 小 图 标 ,调整 图 标 大 小 为 38 像素 X38 像素 。 
(16) 在 “新 闻 中 心 * 下 方 绘制 矩形 ,设置 宽 和 高 分 别 为 276 和 295 ,填充 色 无 ,线条 色 为 
#99CCFF ,笔尖 大 小 为 2 , 描 边 种 类 为 “1 像素 柔 化 ”, 圆 度 为 10% 。 

(17) 在 “通知 公告 "下 方 绘制 矩形 ,设置 宽 和 高 分 别 为 261 和 306 ,填充 色 无 ,线条 色 为 
#99CCFF ,笔尖 大 小 为 2, 描 边 种 类 为 “1 像素 柔 化 ”, 圆 度 为 10%% 。 

(18) 在 主页 界面 图 下 端 , 输 入 “版 权 所 有 人 @@O 某 某 学 院 | 闽 ICP 备 XXXXxXXxxxx 
号 ”, 字 体 , 大 小 .颜色 分 别 为 宋体 .18、#666666 。 

(19) 用 切片 对 主页 进行 切割 (图 7-32 显示 了 主页 中 主要 部 分 的 切割 情况 ) ,然后 导出 
生成 网 页 文件 。 
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7.2.4 设计 子 页 界面 


设计 子 页 界面 时 ,风格 应 该 跟 主 页 一 致 ,尤其 是 网 站 LOGO, 应 该 使 用 同一 个 。 图 7-33 
是 为 “校园 剪影 ”模块 设计 的 子 页 界面 。 

制作 步骤 如 下 。 

(1) 在 Fireworks 中 ,新 建 一 个 950X630 像素 的 图 像 文件 ,保存 图 像 (png 格式 ) ,作为 
校园 网 站 的 “校园 剪影 "模块 的 子 页 界面 图 。 

(2) 把 主页 界面 图 中 两 张 校园 图 像 重 一 的 效果 复制 并 粘贴 到 子 页 界面 图 上 。 

(3) 把 主页 界面 图 中 的 网 站 LOGO 复制 并 粘贴 到 子 页 界面 图 左上 角 。 

(4) 在 子 页 界面 图 中 心 部 位 的 区 域 , 绘 制 一 个 矩形 ,设置 宽 和 高 分 别 为 950 和 420 ,填充 
色 和 线条 颜色 分 别 为 # 2D7CFF 和 直 FFFFFF ,填充 纹理 为 20% 的 “烟雾 效果 ”, 笔 尖 大 小 
为 5, 描 边 种 类 为 “1 像素 柔 化 ”。 

(5) 在 中 心 矩形 下 ,再 绘制 一 个 矩形 ,设置 填充 色 为 并 E7EAF0 ,线条 颜色 无 ,填充 纹 
理 为 17% 的 “网 格 线 6”。 在 “图 层面 板 中 ,把 该 矩形 层 调 到 第 4 步骤 中 绘制 的 矩形 层 
下 面 。 

(6) 输入 “校园 前 影 ”, 设 置 字体 、 大 小 和 颜色 分 别 为 楷体 、25、# FFFFFF。 在 这 个 文本 
块 前 面 ,导入 一 个 小 图 标 ,调整 图 标 大 小 为 51 像素 X41 像素 ,如 图 7-33 所 示 。 
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7-33 ”校园 网 站 子 页 界面 


<S~ 任 务 7.4 


内 容 : 

(1) 设计 并 制作 本 校 网 站 的 主页 和 子 页 界面 。 

(2) 在 “我 的 电脑 "中 ,为 校园 网 站 创建 根 目录 以 及 图 像 等 子 文件 夹 , 然 后 在 Fireworks 
中 对 主页 界面 进行 切割 并 导出 生成 一 个 index. htm 文件 ,index. htm 及 其 相关 的 图 像 应 该 
保持 到 校园 网 站 的 根 目 录 下 。 

(3) 在 Dreamweaver 中 ,为 校园 网 站 新 建 一 个 站 点 。 
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本 章 介绍 三 种 公告 的 制作 方法 : 弹出 式 公告 ,滚动 式 公 告 和 漂浮 式 公告 。 重 点 介绍 行 
为 和 marquee 标签 ,并 简单 介绍 div 标签 和 JavaScript 的 作用 。 

在 本 章 中 ,要 学 习 制 作 三 种 公告 : 弹出 式 公告 ,滚动 式 公告 和 漂浮 式 公 告 。 弹 出 式 公告 
的 效果 是 在 网 页 打开 的 同时 ,弹出 另 一 个 比较 小 的 浏览 器 窗口 ,窗口 中 显示 的 是 公告 的 页 
面 。 滚 动 式 公 告 的 特点 是 在 网 页 中 指定 位 置 上 向 某 个 方向 滚动 。 而 漂浮 式 公 告 的 特点 是 公 
告 的 内 容 块 漂浮 在 网 页 的 正文 内 容 之 上 ,按照 设计 好 的 方向 移动 。 

本 章 学 习 要 点 : 

(1) 了 解 行为 的 作用 

(2) 了 解 marquee 的 作用 

(3) 了 解 div 和 JavaScript 的 作用 

(4) 了 和 解 漂浮 式 公告 的 制作 方法 

(5) 掌握 行为 的 添加 、 修 改 和 删除 

(6) 掌握 marquee 的 常用 属性 

(7) 掌握 弹出 式 公告 的 制作 方法 

(8) 掌握 滚动 式 公告 的 制作 方法 


8.1 弹出 式 公告 


弹出 式 公 告 通过 添加 “打开 浏览 器 窗口 "行为 来 实现 ,所 以 在 制作 弹出 式 公告 之 前 , 先 来 
认识 一 下 行为 的 使 用 。 


8.1.1 行为 的 概念 


在 Dreamweaver 中 ,行为 用 来 帮助 制作 一 些 网 页 特效 ,这 些 特效 主要 是 网 页 对 一 些 外 
界 发 生 的 事件 做 出 的 反应 。 比 如 , 当 光 标 移动 到 导航 栏 标题 上 时 ,会 弹出 菜单 ; 当 网 页 被 打 
开 时 ,会 同时 打开 一 个 小 网 页 窗口 ; 当 光 标 移动 到 图 像 上 时 ,会 出 现 其 他 图 像 。 事 件 指 的 是 
鼠标 的 活动 、 网 页 的 打开 和 关闭 、 用 户 在 键盘 上 的 动作 等 。 总 之 ,通过 设置 行为 ,可 以 指定 当 
某 个 事件 产生 时 让 网 页 产生 特定 的 动作 反应 。 所 以 ,行为 实际 上 包括 两 个 元 素 : 事件 和 
动作 。 

不 同 版 本 的 浏览 器 ,对 Dreamweaver 提供 的 行为 功能 的 支持 不 相同 。 版 本 越 高 ,浏览 
器 支持 的 行为 越 多 。 如 果 浏 览 器 的 版 本 太 低 ,浏览 网 页 的 时 候 就 看 不 到 网 页 上 添加 的 某 些 
行为 效果 。 
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8.1.2 行为 的 基本 操作 

1. 打开 “行为 ”面板 

运行 Dreamweaver ,选择 “窗口 ”>“ 行 为 ”命令 , 即 可 打开 “行为 ”面板 ; 或 者 按 Shift 十 
F4 键 ,也 可 以 打开 或 关闭 “行为 "面板 。 

“行为 ”面板 上 有 两 个 按钮 :“ 添 加 行为 ”按钮 而 和 “删除 事件 ”按钮 一 ,当面 板 中 没有 
添加 任何 行为 时 ,删除 事件 ”按钮 二 处 于 不 可 用 状态 。 

面板 中 分 为 两 列 ,左边 一 列 是 “事件 ”右边 一 列 是 “动作 >”。 如 图 8-1 中 ,添加 了 一 个 行 
为 ,左边 一 列 显示 的 事件 是 onMouseOver, 右 边 一 列 显示 的 动作 是 “设置 状态 栏 文本 ”。 

另外 ， ep ea heer sles 第 
一 种 只 显示 已 经 添加 的 行为 ; 另 一 种 显示 全 部 的 事件 ,并 显示 已 经 设置 的 动作 ,如 图 8-2 
所 示 。 

| 


属性 ,| 行为 | 标签 body> 


I 


= | onError | 
下 为 ] 标 区 Goay | | 
区 [| | 中 | 
国 占 | onkeyPress | 
onke; | 
ear 。 汉 设 拓 本 (er | 
onllouseDown | 
onllousellove | 
onjlouse0ut _ ] 
| snlouseDver 可 设置 态 栏 文本 | 

(ondlouselUp 

| onlinload 


图 8-1 “行为 ”面板 图 8-2 行为 面板 中 显示 所 有 事件 


“行为 ”面板 中 提供 的 可 选 事 件 及 含义 如 下 。 

(1) onBlur, 表 示 当 网 页 上 的 对 象 失 去 焦点 的 时 候 , 比 如 在 文本 输入 框 输入 用 户 名 完成 
后 退出 输入 框 时 。 

(2) onClick, 表 示 当 单 击 网 页 或 网 页 上 某 个 对 象 的 时 候 ,比如 单 击 导航 栏 上 的 标题 时 。 

(3) onDblClick, 表 示 当 双击 网 页 或 网 页 上 某 个 对 象 的 时 候 , 比 如 双击 标题 时 。 

(4) onError, 表 示 当 网 页 代码 运行 出 错 的 时 候 。 

(5) onFocus, 表 示 当 网 页 上 的 对 象 获得 焦点 的 时 候 , 比 如 在 文本 输入 框 输入 用 户 名 时 。 

(6) onKeyDown, 表 示 当 按 住 某 个 按键 时 。 

(7) onKeyPress, 表 示 当 按 住 并 松 开 键盘 上 的 某 个 按键 时 。 

(8) onKeyUp, 表 示 松 开 键 盘 上 的 某 个 按键 时 。 

(9) onLoad, 表 示 网 页 打开 时 。 

(10) onMouseDown ,表示 当 按 住 鼠 标 键 时 。 

(11) onMouseMove, 表 示 当 移动 光标 时 。 

(12) onMouseOnut ,表示 当 光标 从 网 页 或 网 页 中 的 某 个 对 象 上 移 开 时 。 

(13) onMouseOver, 表 示 当 光标 移 到 网 页 或 网 页 中 的 某 个 对 象 上 时 。 
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(14) onMouseUp, 表 示 当 松 开 鼠标 键 时 。 

(15) onUnload, 表 示 当 关闭 网 页 时 。 

2. 添加 行为 

要 添加 行为 ,需要 先 选择 网 页 上 的 某 个 对 象 ,然后 再 单 击 “ 添 加 行为 "按钮 十 ,在 弹出 的 
列表 中 选择 对 应 的 行为 ,然后 进行 动作 的 设置 ,完成 行为 添加 。 

【案例 演示 8-1】 在 校园 网 站 的 主页 上 添加 “设置 状态 栏 文本 ”行为 。 

(1) 在 Dreamweaver 中 打开 校园 网 站 的 主页 , 单 击 编辑 窗口 下 方 的 标签 栏 ,选择 
二 body 二 标签 ,表示 选择 整个 网 页 ; 或 者 在 网 页 的 空白 处 单 击 , 什 么 都 不 选中 ,也 表示 选择 
的 是 整个 网 页 。 = 

(2) 按 Shift 十 F4 键 ,打开 “行为 "面板, 单 击 “ 添 
加 行为 "按钮 二 ,在 弹出 的 列表 中 选择 “设置 文本 "中 


用 4 
设置 文本 
调用 JavaScript 


看 
设置 容器 的 文本 


的 “设置 状态 栏 文本 ”选项 ,如 图 8-3 所 示 。 eesip = 
(3) 在 弹出 的 设置 框 中 ,输入 消息 "欢迎 来 到 某 某 性 | 行 7 于吉 入 国人 
学 院 1”, 如 图 8-4 所 示 , 单 击 “ 确 定 ”按钮 。 8-3 ”添加 “设置 状态 栏 文本 ”行为 


设置 状态 栏 文本 


消息 : 区 天 来 到 系 芭 学 院 1 


让 (站 


图 8-4 “设置 状态 栏 文本 ”对 话 框 


(4) 这 时 ,在 “行为 ”面板 上 将 看 到 新 添加 的 行为 ,行为 的 默认 事件 是 onMouseOver。 保 
存 网 页 ,然后 按 F12 键 ,浏览 行为 的 效果 。 可 以 看 到 ,刚刚 打开 网 页 的 时 候 , 并 没有 看 到 浏 
览 器 下 方 的 状态 栏 上 有 之 前 设置 的 消息 , 当 把 光标 移动 到 网 页 上 时 ,在 状态 栏 上 将 看 到 * 欢 
迎 来 到 某 某 学 院 !”, 如 图 8-5 所 示 。 


index. jpg - Wicrosoft Internet Explorer 辐 回 园 
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图 8-5 状态 栏 文本 显示 效果 
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3. 修改 行为 

上 面 添加 的 “设置 状态 栏 文本 ”行为 ,默认 的 事件 是 当 光 标 移 到 网 页 上 时 。 但 更 经 常 看 
到 的 状态 栏 文本 ,是 在 网 页 打开 的 时 候 就 显示 出 来 的 。 所 以 ,需要 把 行为 的 事件 修改 一 下 。 
另外 ,有 时 可 能 还 需要 修改 状态 栏 文本 的 内 容 , 也 就 是 修改 动作 的 设置 消息 。 

虽然 修改 事件 和 修改 动作 ,都 是 在 修改 行为 ,但 这 两 者 的 修改 方法 是 不 一 样 的。 修改 事 
件 是 通过 单 击 “行为 ”面板 中 要 修改 的 事件 ,使 得 事件 处 于 修改 状态 ,从 而 完成 修改 ; 而 修改 
动作 ,是 通过 双击 动作 ,弹出 动作 的 设置 框 ,来 完成 修改 。 下 面 举例 说 明 。 

【案例 演示 8-2】 修改 校园 网 站 主页 上 的 “设置 状态 栏 文 本 "行为 ,要 求 事件 修改 为 “ 当 
网 页 打开 时 ”, 而 状态 栏 的 文本 消息 要 求 修改 为 “ 某 某 学 院 欢迎 您 1”。 

(1) 在 Dreamweaver 中 打开 校园 网 站 的 主页 ,选择 整个 网 页 。 

(2) 打开 “行为 ”面板 ,可 以 看 到 之 前 添加 在 网 页 上 的 “ 设 
置 状 态 栏 文本 ”行为 , 单 击 行为 中 的 onMouseOver, 如 图 8-6 
所 示 ,使 得 事件 处 于 可 修改 状态 ,然后 单 击 事件 右边 的 箭头 按 
钮 ,在 弹出 的 列表 中 选择 onLoad 选项 ,完成 事件 的 修改 。 

(3) 在 “行为 ”面板 中 ,双击 “设置 状态 栏 文本 ”, 打 开设 置 
框 ,修改 消息 为 “ 某 某 学 院 欢迎 您 1”, 单 击 “ 确 定 ” 按 钮 ,完成 动 
作 的 修改 。 

(4) 保存 主页 , 按 F12 键 ,浏览 主页 ,可 以 看 到 到 网 页 一 打 图 8-6 修改 事件 
开 的 时 候 , 状 态 栏 上 就 显示 “ 某 某 学 院 欢 迎 您 1”", 如 图 8-7 所 示 。 
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图 8-7 状态 栏 文本 被 修改 


4. 删除 行为 
删除 行为 的 时 候 ,首先 选择 被 添加 了 行为 的 对 象 ; 其 次 打开 属性 面板 ,在 面板 中 单 击 要 
删除 的 行为 ; 最 后 单 击 上 方 的 “删除 事件 ”按钮 二 , 即 可 将 行为 删除 。 


8.1.3 添加 弹出 式 公告 


弹出 式 公告 使 用 “打开 浏览 器 窗口 ”行为 来 实现 ,这 种 形式 的 公告 主要 用 于 显示 比较 紧 
急 的 通知 。 
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弹出 式 公 告 一 般 发 生 在 打开 网 页 的 时 候 , 所 以 “打开 浏览 器 窗口 "设置 的 事件 应 该 是 
onLoad。 在 “打开 浏览 器 窗口 ”的 设置 框 中 ,要 求 设置 “要 显示 的 URL”, 也 就 是 选择 一 个 要 
在 浏览 器 窗口 中 显示 的 网 页 ,这 个 网 页 显示 的 就 是 弹出 式 公 告 的 内 容 。 所 以 在 添加 “打开 浏 
览 器 窗口 ?之 前 ,必须 先 制作 好 显示 公告 内 容 的 网 页 。 

【案例 演示 8-3】 在 校园 网 站 的 主页 上 制作 弹出 式 公 告 。 

(1) 在 Dreamweaver 中 ,新 建 一 个 网 页 ,保存 为 
info. html, 保 存在 和 校园 网 站 主页 相同 的 文件 夹 中 。 
在 网 页 上 添加 一 个 表格 ,设置 表格 的 背景 色 , 然 后 在 
表格 中 添加 公告 内 容 , 内 容 如 图 8-8 所 示 。 

(2) 在 Dreamweaver 中 ,打开 校园 网 站 主页 , 选 
择 整个 网 页 ,添加 行为 "打开 浏览 器 窗口 ,在 “要 显 图 8-8 info. html 页 的 公告 内 容 
示 的 URL” 栏 单 击 “ 浏 览 ” 按 钮 ,选择 info. html, 然 后 把 窗口 宽度 和 高 度 设置 为 info. html 中 
公告 表格 的 大 小 (如 图 8-9 所 示 ) ,这 样 打 开 窗 口 时 刚好 把 公告 显示 出 来 。 设 置 完 成 后 单 击 
“确定 ”按钮 。 


打开 浏览 器 窗口 


要 显示 的 WRL: [info. htnl Er | Cm ] 
窗口 宽度 :|300 窗口 高 度 : |300 是 
属性 ， 口 [导航 工 具 和 口 荣 单条 
口 地 址 工具 栏 口 需要 时 使 用 滚动 条 


口 状态 栏 口 调 竖 大 小 手柄 
窗口 名 称 


图 8-9 “打开 浏览 器 窗口 "对话 框 


(3) 按 F12 键 ,浏览 主页 ,看 到 打开 主页 的 同时 弹出 一 个 300 X300 像素 的 浏览 器 窗口 ， 
显示 info. html 的 内 容 ( 如 图 8-10 所 示 )。 

(4) 在 第 (2) 步 又 的 设置 中 ,浏览 器 窗口 的 各 项 
属性 都 没有 选择 ,所 以 在 第 (3) 步 又 中 看 到 的 弹出 公 
告 窗口 是 一 个 被 简化 的 浏览 器 窗口 。 如 果 需 要 在 窗 
口上 显示 导航 栏 . 菜 单条 .地 址 工具 栏 、 垂 直 或 水 平 滚 
动 条 和 状态 栏 或 者 需要 在 浏览 的 时 候 能 够 拖 动弹 出 
窗口 改变 其 大 小 ,那么 可 以 在 “行为 ”面板 中 找到 刚刚 
添加 的 “打开 浏览 器 窗口 ”, 双 击 它 ,重新 打开 设置 框 ， 
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图 8-10 打开 浏览 器 窗口 显示 效果 


选择 “属性 ”中 对 应 的 复 选项 框 。 

(5) 如 果 浏 览 主 页 的 时 候 , 看 不 到 弹出 窗口 ,可 以 试 一 下 在 Dreamweaver 中 把 主页 切换 
到 代码 视图 ,然后 找到 以 下 3 行 代码 ,把 它们 删除 。 这 3 行 代码 时 从 Fireworks 中 导出 网 页 
时 自动 生成 ,有 时 它们 会 影响 Dreamweaver 中 一 些 行为 或 超 链接 的 运行 。 
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<! —— saved from url = (0014)about: internet ——> 
<! —— Fireworks CS5 Dreamweaver CS5 target. Created Wed Jan 18 23:15:06 GMT + 0800 2012 --> 


<! -- fwtable fwsrc = "校园 网 站 主页 . png" fwpage = "页 面 1" fwbase = "index. jpg" fwstyle = 
"Dreamweaver" fwdocid = "895720585" fwnested= "0" ——> 


8.1.4 其 他 常见 行为 


1. 交换 图 像 和 恢复 交换 图 像 

交换 图 像 和 恢复 交换 图 像 主 要 用 来 设置 网 页 上 按钮 的 效果 ,与 设置 “鼠标 经 过 图 像 ”是 
一 样 的 。 添 加 交换 图 像 之 前 ,应 该 先 选 择 网 页 上 的 某 个 图 像 。 在 “交换 图 像 * 的 设置 对 话 框 
中 ,如 图 8-11 所 示 ,“ 图 像 ” 栏 显示 已 选 图 像 的 ID,“ 设 定 原始 档 为 ” 栏 用 来 设置 光标 经 过 已 
选 图 像 时 要 交换 显示 的 图 像 。 当 添加 完 “ 交 换 图 像 ” 之 后 ,Dreamweaver 将 自动 再 添加 一 个 
“恢复 交换 图 像 ” 的 行为 ,并 且 “ 交 换 图 像 " 和 “恢复 交换 图 像 * 的 事件 分 别 是 onMouseOver 和 
onMouseOnut ,无 须 修 改 。 
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设 定 原始 档 为 :|inages/ index2_ammiul. jpg 
预先 副 入 图 像 
慑 标 洽 开 时 恢复 图 像 


图 8-11 “交换 图 像 " 对 话 框 


不 过 ,添加 交换 图 像 的 时 候 ,并 没有 设置 超 链接 ,而 是 需要 在 添加 之 后 选择 图 像 ,在 属性 
面板 上 设置 “链接 " 栏 。 这 一 点 与 “鼠标 经 过 图 像 " 不 同 。 

2. 弹出 信息 

“弹出 信息 ”行为 一 般 用 来 设置 弹出 一 个 警告 框 或 提示 框 ,图 8-12 用 来 设置 要 弹出 的 信 
息 , 图 8-13 是 添加 行为 后 的 弹出 效果 。 


消息 :releonel 


Microsoft Internet Explorer 攻 | 


weleone! 


图 8-12 “弹出 信息 ”的 设置 图 8-13 显示 效果 
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3. 改变 属性 

“改变 属性 ”行为 用 来 改变 网 页 上 某 个 对 象 的 属性 ,比如 单 击 的 时 候 改变 文字 的 大 小 或 
者 改变 输入 框 的 背景 色 等 。 不 过 ,不 是 所 有 的 网 页 对 象 都 可 以 通过 这 个 行为 来 改变 属性 ,只 
有 图 8-14 中 列 出 的 “元 素 类 型 "的 属性 才 可 以 被 改变 。 


图 8-14 “改变 属性 ”行为 1 


比如 ,要 设置 单 击 文本 区 域 时 文本 区 域 背景 色 变 成 并 9CF ,操作 步骤 是 : 选中 网 页 中 的 文 
本 区 域 ,然后 再 添加 “改变 属性 ”行为 ,在 设置 框 中 选择 属性 并 设置 新 的 值 ,如 图 8-15 所 示 。 


元 素 类 型 ，| TEXTAREA ~ 
元 索 ID; |TEXTAREA “TEXTI” Bal LL 
才 助 
属性 : @@ 进 择 :|backgroundC olor v 
O 输入: | 
新 的 值 ，#9CF 


图 8-15 “改变 属性 "行为 2 


4. 效果 
“效果 ”行为 主要 用 来 设置 网 页 上 某 个 对 象 的 出 现 、 显 示 或 消失 的 效果 ,比如 使 用 “晃动 ” 
效果 ,可 以 设置 单 击 网 页 上 某 个 图 像 时 ,图 像 发 生 左右 晃动 。 


常用 的 效果 如 图 8-16 所 示 , 其 中 ,“ 滑 动 "效果 要 求 网 页 对 象 RR 
必须 放 在 一 个 容器 中 ,比如 把 图 像 放 在 二 div<=/div 二 标签 检查 表单 
中 ,再 对 一 div> 二 /div 标签 使 用 "滑动 " 效 果 。 一 div 人 标签 a 
的 作用 可 参阅 8. 2. 3 小 节 。 了 
5.“ 显 示 -隐藏 元 素 ” 行 为 den 
“显示 -隐藏 元 素 ” 行 为 可 用 于 控制 网 页 二 div 之 二 /div 之 获取 更 多 行为 


标签 中 内 容 的 显示 和 隐藏 或 表单 对 象 的 显示 和 隐藏 ,其 设置 
对 话 框 如 图 8-17 所 示 。 表 单 对 象 将 在 后 面 的 章节 介绍 。 


< 任务 3.1 
内 容 : 为 自己 制作 的 校园 网 站 主页 添加 弹出 式 公告 。 


8-16 “效果 ”行为 
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8-17 “显示 -隐藏 元 素 ” 对 话 框 


8.2 滚动 式 公 告 


在 网 页 上 ,经常 可 以 看 到 滚动 式 公 告 ,为 什么 公告 要 用 滚动 的 形式 出 现 呢 ? 原因 一 般 有 
两 个 : 其 一 是 网 页 上 显示 公告 的 板块 空间 较 小 , 若 静 态 显示 ,无 法 将 公告 全 部 显示 出 来 ; 其 
二 是 公告 在 网 页 上 和 希望 通过 滚动 引起 用 户 的 注意 。 

深 动 公告 一 般 可 以 通过 两 种 方式 来 完成 ,一 种 是 使 用 二 marquee 二 标签 , 男 一 种 是 使 用 
Flash 来 完成 。Flash 的 内 容 将 在 后 面 的 章节 介绍 ,在 此 先 来 认识 一 下 二 marquee 二 标签 的 
使 用 。 


8.2.1 marquee 的 作用 


marquee 标签 的 作用 是 制作 滚动 对 象 , 该 标签 成 对 出 现 : 二 marquee 二 /marquee 二 。 
可 以 使 用 marquee 标签 制作 滚动 文字 或 者 滚动 图 像 ,滚动 的 内 容 应 该 放 在 二 marquee 二 
所/marquee 二 的 中 间 , 比如 过 marquee 过 > 这 是 滚动 文本 所 /marquee 二 或 者 二 marquee 二 
< 一 img src 一 "images/renwu. jpg" 二 二 /marquee 二 。marquee 经 常用 来 制作 网 页 上 的 公告 


或 者 新 闻 之 类 的 内 容 。 图 8-18 展示 的 是 一 个 新 闻 中 心 板块 的 滚动 文本 。 


本 Ne 
3 我 院 荣 唐 福建 省 第 十 一 届 ( 2009-2011 年 度 ..。 (2012-1-13) 
>)>[ 图 文 ] 学 院 质 利通 过 省 级 示范 性 高 职 院 校 建设 项 目 验收 (2012-1-13) 
?学 院 师 生 党 员 进行 “ 争 当 标兵 建设 示范 ”第 二 阶段 (2012-1-13) 
>2 自 摇 载 体 促 发 展 围绕 中 心 建 示范 一 一 12 个 党 建 (2012-1-13) 
学 院 基层 党 组 织 北 隧 人心 促 示范 (2012-1-13) 


>>[ 图 广 ] 给 力 春 运 添 光彩 发 挥 才干 助 成 长 一 一 技术 工 .，。 2012-1-13) 
8-18 滚动 文本 示例 


8.2.2 marquee 的 属性 

当 把 滚动 的 内 容 放 进 二 marquee 二 一 /marquee 二 标签 中 间 之 后 ,并 不 能 马上 产生 滚动 
的 效果 ,还 需要 设置 marquee 的 属性 。marquee 的 属性 可 以 设置 滚动 块 的 大 小 滚动 的 方 
向 .速度 ,停止 和 启动 等 。 

1. marquee 的 常见 属性 

(1) width height, 分 别 用 来 设 定 滚动 文本 块 的 宽度 和 高 度 , 以 像素 为 单位 。 
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(2) direction ,用 来 设 定 滚动 方向 ,可 选 值 有 up .down \left right。 

(3) scrollamount, 用 来 设 定 每 滚动 一 次 ,会 滚动 几 行 。 

(4) scrolldelay, 用 来 设 定 每 次 滚动 间隔 的 时 间 ,以 秒 为 单位 。 

(5) onmouseover, 用 来 设 定 当 光 标 移 到 滚动 文本 上 时 要 发 生 的 动作 ,比如 希望 滚动 停 
止 ,可 设 为 “stop();”。 

(6) onmouseout, 用 来 设 定 当 光 标 从 滚动 文本 
上 移 开 时 要 发 生 的 动作 ,比如 希望 滚动 继续 ,可 设 为 
“start()s”。 

【案例 演示 8-4】 制作 校园 网 站 主页 上 的 新 闻 
中 心 板块 内 容 , 使 用 滚动 文本 的 形式 ,效果 如 图 8-19 
所 示 。 

(1) 在 Dreamweaver 中 打开 主页 ,选择 新 闻 中 
心 板 块 单元 格 中 的 图 像 ,将 它 设置 为 单元 格 的 背景 
图 像 。 

(2) 在 单元 格 中 插入 一 个 嵌 套 表格 , 行 数 和 列 
数 根据 实际 需求 确定 ,在 本 例 中 是 10 行 2 列 , 行 高 
25, 在 嵌 套 表格 中 添加 小 图 标 和 新 闻 内 容 。 

(3) 选中 整个 嵌 套 表格 ,然后 切换 到 代码 视图 ， 
可 以 看 到 嵌 套 表格 对 应 的 代码 已 经 被 选中 。 单 击 二 table 二 标签 前 面 的 一", 把 嵌 套 表格 的 
代码 收缩 起 来 ,在 收 起 的 二 table 之 标签 前 后 各 加 上 过 marquee 二 和 二 /marquee 二 标签 ,如 
图 8-20 所 示 。 


图 8-19 校园 网 站 主页 上 的 滚动 文本 


<marquee> 


<table ... 


</marquee> 


8-20 ”marquee 标签 的 添加 示例 
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(4) 在 王 marquee 过 标签 中 添加 如 下 属性 : 


< marquee height ="200" direction ="up" scrollamount ="1" scrolldelay = "3" 


onmouseover = "stop();" onmouseout = "start();"> 


该 深 动 文本 的 方向 是 向 上 的 , 当 光 标 移动 到 深 动 文本 上 时 深 动 停止 , 移 开 时 又 开始 


(5) 保存 网 页 , 按 F12 键 浏览 ,查看 效果 。 

2. marquee 其 他 属性 

(1) align, 设 定 滚动 块 内 容 的 对 齐 方式 ,其 属性 值 如 下 。 

@ absbottom: 绝对 底部 对 齐 。 

@ absmiddle: 绝对 中 央 对 齐 。 

@ baseline: 底线 对 齐 。 

@ bottom: 底部 对 齐 , 这 个 是 默认 值 。 

@ left: 左 对 齐 。 

@ middle: 中 间 对 齐 。 

@ right: 右 对 齐 。 

@ texttop: 顶 线 对 齐 。 

G@) top: 顶部 对 齐 。 

(2) behavior, 设 定 滚 动 的 方式 ,属性 值 如 下 。 

O@ alternate: 表示 在 两 端 之 间 来 回 滚动 。 

@ scroll: 表示 由 一 端 滚动 到 另 一 端 ,会 重复 ,这 个 是 默认 值 。 

@ slide: 表示 由 一 端 滚动 到 另 一 端 ,不 会 重复 。 

(3) bgcolor, 设 定 滚动 块 的 背景 颜色 ,背景 颜色 可 用 RGB 十 六 进 制 的 格式 或 颜色 名 称 
来 设 定 , 属 性 值 格式 如 下 。 

Q@ 十 六 进 制 格式 ,如 #006699 。 

@ RGB 格式 ,如 RGB(10%,50% ,100%)。 

@ 颜色 名 称 格式 ,如 red。 

(4) hspace, 设 定 滚动 块 所 在 的 位 置 距 离 父 容器 水 平 边框 的 距离 ,其 属性 值 是 一 个 
整数 。 

(5) vspace, 设 定 滚动 块 所 在 的 位 置 距 离 父 容器 垂直 边框 的 距离 ,其 属性 值 是 一 个 
整数 。 

(6) loop, 设 定 滚 动 的 次 数 , 当 loop= 一 1 表示 一 直 滚 动 下 去 ,默认 为 一 1。 


8.2.3 无 颖 滚动 


【案例 演示 8-5】 制作 滚动 的 图 像 ,效果 如 图 8-21 所 示 。 

(1) 在 Dreamweaver 中 打开 要 添加 滚动 图 像 的 网 页 ,在 需要 滚动 图 像 的 位 置 添加 若干 
个 图 像 。 

(2) 选择 要 滚动 的 图 像 ,切换 到 代码 视图 ,添加 marquee 标签 及 其 属性 ,如 图 8-22 
所 示 。 
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图 8-21 使 用 marquee 制作 的 滚动 图 像 


<marquee align="left”width="500”helght="80”hspace="20”direction="lefc" 


</marquee> 


图 8-22 ”滚动 图 像 中 使 用 的 marquee 代码 


(3) 保存 网 页 , 按 F12 键 进行 浏览 ,查看 效果 。 

注意 ,使 用 marquee 制作 的 滚动 效果 ,是 全 部 都 滚动 完 后 再 重新 开始 显示 滚动 内 容 ， 
所 以 在 第 一 次 滚动 和 第 二 次 滚动 之 间 ,滚动 区 域 中 会 出 现 短暂 的 空白 。 这 样 的 效果 ,不 
同 于 无 颖 滚动 。 无 颖 滚动 是 指 第 一 次 滚动 和 第 二 次 滚动 之 间 是 紧密 衔接 的 , 当 第 一 次 滚 
动 显 示 出 底部 内 容 时 ,后 面 马 上 紧 跟 着 第 二 次 滚动 的 顶部 内 容 ,中 间 没 有 任何 空白 缝隙 
出 现 。 无 颖 滚动 一 般 使 用 HTML 中 的 二 div 二 标签 .CSS 样式 以 及 JavaScript 代码 配合 


完成 。 
下 面 介绍 一 个 无 颖 滚动 图 像 的 例子 ,了 解 无 颖 滚动 的 特点 ,并 简单 地 认识 一 下 div 标签 
和 JavaScript 代码 。 


【案例 演示 8-6】 制作 无 颖 滚动 图 像 ,效果 如 图 8-23 所 示 。 

(1) 在 Dreamweaver 中 打开 网 页 ,添加 图 像 。 

(2) 选择 要 滚动 的 图 像 ,切换 到 代码 视图 ,在 图 像 代 码 前 面 加 上 div 标签 ,如 图 8-24 
所 示 。 
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<div id="demo2"></div> 
/div> 
/div> 


图 8-24 无 缝 滚动 中 使 用 div 标签 


(3) 在 代码 视图 中 ,找到 网 页 代码 的 head 部 分 ,添加 下 面 代码 : 


< style type = "text/css"> 

us 

#demo { 

background: #FFF; 
overflow:hidden; 
border: 1px dashed # CCC; 
width: 500px; 

} 

# demo img { 

border: 3px solid # F2F2F2; 
} 

# indemo{ 
float: left; 
width:800%; 

} 

#demol{ 
float: left; 

} 

# demo2{ 
float: left; 

} 

et 

</style> 
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(4) 在 代码 视图 中 ,找到 二 /body 二 标签 ,在 该 标签 后 面 、 二 /html 二 标签 前 面 ,添加 下 面 
代码 。 
< script> 
ws 
var speed= 10; // 数 字 越 大 速度 越 慢 
Var tab = document. getElementById( "demo" ) ; 
Var tabl = document. getElementBYId("demol" ); 
Var tab2 = document. getElementById("demo2"); 
tab2. innerHTML = tabl. innerHTML; // 克 隆 demol 为 demo2 
function Marquee( ){ 
if(tab2. offsetWidth- tab. scrollLeft<= 0) // 当 滚动 至 demol 与 demo2 交界 时 
tab. scrollLeft - = tabl.offsetWidth 。 //deno 跳 到 最 顶端 
else{ 
tab. scrollLeft++ 
} 
} 
Var MyMar = setInterval (Marquee, speed); 
tab. onmouseover = function() {clearInterval (MyMar)}; // 光 标 移 上 时 清除 定时 器 达到 
// 滚 动 停止 的 目的 
tab. onmouseout = function( ) {MyMar = setInterval(Marquee, speed) } ; // 光 标 移 开 时 重 设 定时 器 
--> 
</script > 


(5) 保存 网 页 , 按 F12 键 ,浏览 网 页 ,查看 效果 。 

在 上 面 的 例子 中 ,使 用 了 二 div 二 标签 .CSS 样式 和 JavaScript 代码 。 过 div 之 标签 作为 
容器 ,用 来 存放 要 滚动 的 内 容 ; CSS 样式 用 来 修饰 DIV 容器 ,控制 容器 的 大 小 .背景 和 和 对齐 
方式 等 ; JavaScript 代码 则 用 来 控制 DIV 容器 及 其 存放 内 容 的 滚动 方式 。 

1. 一 div 二 标签 

div 主要 用 于 将 网 页 中 的 内 容 进行 分 区 或 分 节 , 它 是 成 对 出 现 的 ,并 且 每 个 二 div 二 标签 
都 有 一 个 id 属性 ,用 来 区 别 网 页 中 的 多 个 DIV。 在 本 例 中 ,使 用 了 4 对 二 div 之 标签 。id 为 
demo 的 DIV 用 来 设 定 滚 动 区 域 ,通过 CSS 样式 ##demo 设置 了 滚动 区 域 的 宽度 为 500px; 
id 为 indemo 的 DIV 用 来 设 定 存放 滚动 内 容 的 区 域 ,通过 CSS 样式 并 indemo, 设 置 了 存放 
区 域 的 宽度 为 外 层 DIV 的 800%; id 为 demol 的 DIV 用 来 设 定 图 像 的 显示 区 域 ; id 为 
demo2 的 DIV 用 来 设 定 一 个 空 的 区 域 ,用 于 判断 demol 的 右边 界 。 

2. JavaScript 代码 

JavaScript 是 一 种 用 于 制作 网 页 特殊 效果 的 语言 , 它 可 以 被 浏览 器 识别 并 且 运 行 ,不 需 
要 服务 器 的 解释 。JavaScript 代码 有 时 也 被 叫做 “脚本 代码 ”。 在 网 页 代码 中 ,JavaScript 代 
码 被 放 在 二 script 二 过 /script 之 标签 中 。 代 码 中 的 “// ”表示 对 代码 的 解释 ，“//" 后 面 的 内 容 
就 是 注释 的 内 容 ,不 会 影响 到 脚本 代码 的 运行 效果 。 

目前 市 场 上 流行 使 用 *DIV 十 CSS” 的 方式 对 网 页 进行 布局 ,这 种 网 页 布局 方法 有 别 于 
传统 HTML 网 页 设计 语言 中 的 表格 定位 方式 ,可 实现 网 页 页 面 内 容 与 表现 形式 相 分 离 。 
而 CSS 配合 JavaScript 使 用 ,可 以 让 网 页 页 面 内 容 的 表现 形式 更 加 丰富 。 这 方面 的 知识 ， 
本 书 不 展开 讨论 ,有 兴趣 的 读者 可 以 另行 学 习 。 


第 8 章 网 页 制作 :添加 公告 “进门 CC 


< 任务 8.2 
内 容 : 为 自己 制作 的 校园 网 站 主页 添加 滚动 内 容 。 


8.3 ”漂浮 式 公 告 


在 很 多 网 站 的 主页 上 ,都 见 过 一 些 标 来 飘 去 的 广告 ,有 时 候 它 显得 很 碍 眼 ,因为 妨碍 了 
阅读 网 页 的 内 容 , 但 是 不 可 否认 ,这 样 的 广告 很 难 让 人 视而不见 ,所 以 广告 的 效果 更 加 明显 。 
这 样 的 形式 ,也 可 以 用 于 公告 ,叫做 “漂浮 式 公 告 ”, 它 一 般 使 用 “DIV 十 JavaScript” 的 技术 来 
实现 。 

本 节 只 为 读者 介绍 一 种 常用 漂浮 式 公 告 的 制作 方法 ,其 中 代码 部 分 供 读者 另行 研究 。 

【案例 演示 8-7】 在 网 页 上 制作 漂浮 公 
告 ,效果 如 图 8-25 所 示 。 

(1) 在 Dreamweaver 中 打开 要 添加 公告 
的 网 页 ,切换 到 代码 视图 ,在 二 body 二 标签 下 站 
面 添加 以 下 HTML 代码 。 在 网 页 上 添加 一 个 
表格 ,表格 放 在 二 div 之 标签 中 ,表格 中 显示 公 
告 的 内 容 。 志 div 之 标签 中 还 嵌 套 有 另外 一 个 
二 div 之 标签 ,显示 "关闭 广告 xx”。 在 有 些 网 图 8-25 ”漂浮 公告 示例 
站 上 ,也 会 看 到 漂浮 的 是 一 张 图 像 ,实际 上 就 
是 把 代码 中 的 过 table 二 过 /table 二 这 一 段 换 成 图 像 标 签 二 img 二 的 相关 代码 。 


<div id="ad" style = "position:absolute; font - size: 12pt; color: # FFF; font - weight: 
bold;"> 
< table width = "300" border = "0" cellspacing = "0" cellpadding = "0"> 
<tr> 
<td width= "16$% " bgcolor = "#990000"> gnbsp;</td> 
<td width= "70% " bgcolor = "#990000"> gnbsp;</td> 
<td width= "14% " bgcolor = "#990000"> gnbsp;</td> 
</tr> 
< 本 > 
<td height = "92" bgcolor = "#990000"> gnbsp;</td> 
<td bgcolor = "#990000"> 热 烈 祝贺 我 校 被 评 为 文明 学 校 !</td> 
<td bgcolor = "#990000"> gnbsp;</td> 
</tr> 
<tr> 
<td bgcolor = "#990000"> gnbsp;</td> 
<td bgcolor = "#990000"> gnbsp;</td> 
<td bgcolor = "#990000"> gnbsp;</td> 
</tr> 
</table> 
<div style= "FONT— SIZE: 9pt; CURSOR: hand" align = right > 关闭 广告 x</div> 
</div> 


(2) 在 一 div 之 标签 前 面 添加 下 面 这 段 JavaScript 代码 ,控制 id 为 ad 的 DIV 容器 ,设置 
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将 它 隐藏 。 


< script type = "text/javascript"> 

function hidead() 

{document. getElementById("ad"). style. display = "none";} 
</script > 


(3) 修改 显示 “关闭 广告 xX” 的 div 标签 ,在 标签 中 添加 onclick 属性 ,添加 如 下 代码 , 设 
置 当 单 击 “ 关 闭 广 告 X” 时 ,会 运行 第 (2) 步 又 中 添加 的 代码 ,将 id 为 ad 的 DIV 容器 隐藏 。 


<div onclick = "hidead( );" style= "FONT- SIZE: 9pt; CURSOR: hand" align = right > 关闭 广告 x</div> 


(4) 在 整 段 二 div 之 一 /div 二 标签 后 面 添加 以 下 JavaScript 代码 ,用 来 对 id 为 ad 的 DIV 
容器 内 容 进 行 控制 ,使 它 产生 漂浮 的 效果 。 


< script> 

varx = 50,y = 60 

var xin = true, yin = true 

var step = 1 

vardelay = 1 

var obj = document. getElementById("ad") 

function floatAD() { 
var L=T=0 
Var R= document. body. clientWidth - obj. offsetWidth 
var B = document. body. clientHeight - obj. offsetHeight 
obj. style. left = x + document. body. scrollLeft 
obj. style. top = y + document. body. scrollTop 
x = x+ step#(xin?1: 一 1) 
if (x<L) { xin = true; x = L} 
if (x>R){ xin = false; x = R} 
Y= y+ stepx (yin?1:—1) 
if (y<T) {yin = true; y= T} 
if (y>B) {yin = false; y= B} 
} 

var itl= setInterval("floatAD()", delay) 

obj. onmouseover = function(){clearInterval(itl)} 

obj. onmouseout = function( ) { itl = setInterval("floatAD()", delay)} 

</script> 


(5) 保存 网 页 , 按 F12 键 ,浏览 网 页 查看 效果 。 


本 章 介绍 一 种 特殊 的 网 页 : 框架 集 网 页 。 让 大 家 认识 一 个 浏览 器 窗口 被 分 割 成 多 个 小 
窗口 的 方法 及 作用 ,并 掌握 框架 集中 超 链 接 目标 的 设置 。 另 外 ,还 将 介绍 框架 集 、 框 架 以 及 
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内 肉 框 架 对 应 的 标签 和 相关 属性 。 


本 章 学 习 要 点 : 


(1) 了 解 框 架 集 和 框架 的 作用 

(2) 了 解 内 崇 框 架 的 作用 

(3) 了 解 超 链接 目标 与 框架 的 关系 
(4) 掌握 框架 页 的 基本 操作 

(5) 掌握 框架 集 和 框架 的 常用 属性 
(6) 掌握 框架 集中 超 链 接 目标 的 设置 
(7) 掌握 内 嵌 框 架 标签 及 其 常用 属性 


在 浏览 网 页 的 时 候 , 有 时 会 看 到 这 种 情况 : 在 一 个 浏览 器 窗口 中 ,上 半 部 分 的 内 容 保持 
不 变 ,下 半 部 分 的 内 容 可 以 根据 需要 发 生变 化 ; 或 者 左 半 部 分 的 内 容 保持 不 变 , 右 半 部 分 的 
内 容 可 以 变化 。 比 如 ,天 涯 论坛 (http://www. tianya. cn/bbs/index. shtml) ,就 属于 第 二 种 


情况 ,如 图 9-1 所 示 。 
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9.1 框架 集 和 框架 
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图 9-1 天 涯 论坛 使 用 框架 集 
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在 天 涯 论坛 的 主页 上 ,有 左右 两 个 区 域 ,左边 显示 论坛 的 栏目 导航 ,右边 显示 对 应 的 内 
容 。 当 在 导航 上 选择 不 同 栏目 的 时 候 , 右 边区 域 就 会 出 现 不 同 的 网 页 内 容 。 仔 细 观 察 一 下 
此 时 的 浏览 器 窗口 ,事实 上 它 被 分 成 了 左右 两 个 区 域 ,在 左 区 域 的 右边 界 上 ,还 能 看 到 垂直 
的 滚动 条 ,滚动 条 属于 浏览 器 窗口 的 一 个 部 件 , 说 明 浏 览 器 窗口 事实 上 已 经 被 分 割 成 了 左右 
两 个 小 窗口 。 一 般 , 一 个 窗口 显示 一 个 独立 的 网 页 ,所 以 实际 上 在 这 个 浏览 器 窗口 中 ,看 到 
的 是 两 个 网 页 。 换 句 话说 ,是 两 个 网 页 组 成 了 一 个 集合 ,形成 天 涯 论坛 的 主页 ,显示 在 一 个 
完整 的 浏览 器 窗口 中 。 

在 上 面 的 例子 中 ,浏览 器 窗口 被 分 割 成 多 个 小 窗口 ,这 些小 窗口 叫做 “框架 ”。 如 果 一 个 
网 页 需要 多 个 页 面 集合 而 成 ,那么 浏览 这 个 网 页 的 时 候 , 一 般 就 需要 有 多 个 框架 的 浏览 器 窗 
口 ,所 以 把 这 样 的 网 页 叫做 “框架 集 ”。 

所 以 ,框架 集 就 是 包含 多 个 页 面 的 “网 页 ”, 而 框架 就 是 框架 集中 用 来 显示 一 个 独立 页 面 
的 小 窗口 。 注 意 ,一 个 框架 集 文件 只 是 记录 了 这 样 的 信息 : 包含 框架 的 数量 ,框架 的 属性 、 
框架 的 比例 和 相对 位 置 。 所 以 从 严格 意义 上 来 说 ,框架 集 不 算是 一 个 网 页 , 它 只 是 多 个 网 页 
的 集合 。 

在 一 个 浏览 器 窗口 中 使 用 多 个 框架 ,主要 目的 是 为 了 在 改变 窗口 中 某 个 区 域内 容 的 同 
时 ,其 他 区 域 的 内 容 保 持 不 变 。 


9.2 基本 操作 


9.2.1 创建 框架 集 


创建 框架 集 , 是 指 在 创建 一 个 普通 的 网 页 之 后 ,再 插入 框架 。 创 建 步 又 如 下 。 

(1) 运行 Dreamweaver, 选 择 * 文 件 ” 新 建 ”命令 。 在 “新 建文 档 ” 对 话 框 中 选择 “空白 
页 ”,“ 页 面 类 型 "选择 HTML,“ 布 局 ”选择 “无 ”, 然 后 单 击 “ 创 建 " 按 钮 。 

(2) 选择 “窗口 >“ 插入 ”命令 ,在 网 页 编辑 窗口 右 侧 打开 “插入 ”面板 ,在 “插入 "面板 中 
选择 “布局 ”, 如 图 9-2 所 示 。 

(3) 在 “插入 ”面板 上 , 往 下 拖 动 右 侧 的 滚动 条 ,直至 看 到 “框架 ”"。 单 击 “ 框 架 ” 左 侧 的 黑 
色 小 三 角形 图 标 , 会 出 现下 拉 列 表 , 如 图 9-3 所 示 ,选择 其 中 的 某 一 种 框架 ,就 可 以 在 新 建 的 
HTML 文档 中 插入 框架 ,使 HTML 文档 变 成 一 个 框架 集 。 
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图 9-2 布局 面板 图 9-3 添加 框架 的 菜单 
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创建 框架 集 另 一 种 方式 : 使 用 “示例 中 的 页 ”。 

(1) 选择 Dreamweaver 中 的 “文件 ”>“ 新 建 "命令 。 

(2) 在 弹出 的 “新 建文 档 ” 对 话 框 中 ,选择 “示例 中 的 页 ”, 在 示例 文件 夹 中 选择 “框架 
页 ”, 在 示例 页 中 选择 某 一 种 类 型 的 框架 集 ,在 对 话 框 的 右 侧 可 以 预览 所 选 类 型 的 样式 。 

初次 通过 这 种 方式 创建 了 框架 集 之 后 ,在 Dreamweaver 中 会 弹出 一 个 “框架 标签 辅助 
功能 属性 ”对 话 框 ,可 以 设 定 某 个 框架 的 标题 。 一 般 选 择 不 改变 默认 值 ,直接 单 击 “ 确 定 ” 按 
钮 就 可 以 了 。 

如 果 觉 得 这 个 对 话 框 没有 必要 弹出 ,可 以 通过 “首选 参数 ”的 设置 来 把 它 去 除 。 

选择 Dreamweaver 中 的 “编辑 ”>“ 首 选 参数 ”命令 ,在 弹出 的 对 话 框 中 选择 分 类 为 “ 辅 
助 功 能 ”, 在 右 侧 的 “在 插入 时 显示 辅助 功能 属性 ”中 ,取消 选择 “框架 ” 复 选 框 ,然后 单 击 “ 确 
定 ” 按 钮 。 以 后 再 创建 框架 集 ,就 不 会 弹出 “框架 标签 辅助 功能 属性 ”对 话 框 了 。 


9.2.2 选择 框架 集 和 框架 


编辑 框架 集 有 时 需要 选择 框架 ,有 时 需要 选择 整个 框架 集 , 这 些 选 择 操作 一 般 需 要 用 到 
“框架 ?面板 。 选 择 Dreamweaver 的 “窗口 ”~ 框架 ”命令 ,可 以 在 网 页 编辑 窗口 的 右 侧 打开 
“框架 ”面板 ; 也 可 以 通过 按 Shift 十 F2 键 来 打开 或 关闭 “框架 ”面板 。 

“框架 ”面板 上 显示 了 框架 集 的 结构 。 如 果 是 左右 两 个 框 。“ gx ee 于 | 
架 组 成 的 框架 集 ,那么 同样 可 以 在 框架 面板 上 看 到 左右 两 区 
域 ,并 且 在 区 域 上 都 显示 了 各 自 的 名 称 ,比如 图 9-4 显示 了 左 
区 域名 称 是 leftFrame3 , 右 区 域名 称 是 “mainFrame。 

在 “框架 ?面板 上 , 单 击 某 个 区 域 , 就 表示 选择 了 框架 集中 
对 应 的 框架 。 如 果 要 选择 整个 框架 集 , 需 要 单 击 “框架 ”面板 
的 最 外 一 层 边 框 ,如 图 9-4 所 示 的 黑色 边框 。 


9.2.3 ”保存 框架 集 和 框架 生生 琴瑟 


保存 框架 集 ,首先 要 选中 整个 框架 集 或 者 在 “框架 ?面板 上 选择 任何 一 个 框架 ,然后 选择 
Dreamweaver 中 的 “文件 ”~ 保存 框架 页 ”命令 或 “框架 集 另 存 为 ”命令 。 在 弹出 的 “另存 
为 "对话 框 中 ,选择 用 来 存放 框架 集 文件 的 位 置 , 并 输入 文件 名 ,然后 单 击 “ 保 存 ” 按 钮 。 

注意 ,在 这 里 框架 集 也 被 叫做 “框架 页 ”, 意 思 是 包含 了 框架 的 网 页 。 

保存 框架 ,首先 在 框架 集 的 编辑 窗口 中 , 单 击 要 保存 的 框架 (不 是 在 “框架 "面板 中 单 
击 ) ,然后 选择 Dreamweaver 中 的 “文件 ”>“ 保 存 框架 "命令 或 者 “框架 另存 为 "命令 。 在 
弹出 的 “另存 为 "对话 框 中 ,选择 用 来 存放 框架 页 的 位 置 ,并 输入 文件 名 ,然后 单 击 “ 保 存 ” 
按钮 。 

细心 观察 会 发 现 ,在 保存 框架 集 的 对 话 框 中 “文件 名 ? 栏 一 般 显 示 的 默认 名 称 是 
UntitledFrameset-x ; 而 保存 框架 的 对 话 框 中 性 文件 名 ” 栏 显示 的 是 UntitledFrame-* 或 者 
Untitled-x ,通过 这 个 细小 的 区 别 ,可 以 判断 当前 选择 的 是 保存 框架 集 还 是 框架 。 

保存 了 框架 集 和 框架 之 后 ,在 Dreamweaver 编辑 窗口 中 ,如 果 选 择 框架 集 或 某 一 个 框 
架 ,编辑 窗口 的 文件 名 标签 上 显示 的 是 框架 集 的 名 称 ; 如 果 单 击 编辑 窗口 中 的 某 个 框架 , 文 
件 名 标签 显示 的 是 框架 的 名 称 。 
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如 果 对 框架 或 框架 集 进 行 了 某 些 修改 ,都 需要 重新 进行 保存 ,最 简单 的 保存 方式 就 是 选 
择 “ 文 件 ”>“ 保 存 全 部 ”命令 。 


9.2.4 修改 框架 


1. 拖 动 框架 大 小 

在 框架 集 的 编辑 窗口 中 ,把 光标 移动 到 框架 的 边框 上 , 当 光 标 变 成 上 下 或 左右 箭头 形状 
的 时 候 , 按 住 鼠 标 左 键 并 拖 动 ,就 可 以 改变 框架 的 大 小 了 。 

如 果 看 不 到 框架 的 边框 ,选择 * 查 看” 可视化 助理 ”> 框架 边框 > 命令。 

2. 删除 框架 

把 光标 移动 到 框架 的 边框 上 , 当 光 标 变 成 上 下 或 左右 箭头 形状 时 , 按 住 鼠标 左 键 并 拖 
动 , 把 它 拖 到 相 邻 的 另 一 个 边框 上 ,直至 被 拖 动 的 边框 消失 ,框架 就 被 删除 了 。 

3. 增加 框架 

增加 框架 有 两 种 操作 方式 。 

第 一 种 方式 ,把 光标 定位 在 框架 集中 要 增加 框架 的 位 置 ,在 “插入 ”面板 中 选择 “布局 ”， 
再 选择 某 一 种 框架 。 

第 二 种 方式 , 按 住 Alt 键 ,同时 拖 动 某 一 个 框架 的 边框 ,就 可 以 产生 一 个 新 的 框架 。 

【案例 演示 9-1】 创建 一 个 上 下 结构 的 框架 集 , 保 存 为 xyjy. html 并 作为 校园 网 站 中 
“校园 剪影 "栏目 对 应 的 网 页 。 把 该 框架 集 的 上 框架 保存 为 xyjy_top. html, 下 框架 保存 为 
xyjy_buttom. html, 效 果 如 图 9-5 所 示 。 
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图 9-5 “校园 剪影 页 的 框架 结构 


(1) 运行 Dreamweaver, 选 择 “ 文 件 ”>“ 新 建 "命令 .通过 示例 中 的 页 ,创建 一 个 上 方 固 
定 的 框架 集 ,如 图 9-6 所 示 。 
(2) 调整 一 下 框架 集中 上 下 框架 的 大 小 比例 。 
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左 侧 固 定 ， 上方 嵌 套 用 大 小 固定 的 上 方 框架 水 平 拆 分 的 框架 页 


图 9-6 创建 上 方 固定 的 框架 集 


(3) 在 编辑 窗口 中 分 别 单 击 上 下 框架 ,并 分 别 选 择 保存 框架 为 xyjy_top. html 和 xyjy_ 
buttom. html 。 

(4) 打开 “框架 ”面板 ,选择 整个 框架 集 ,保存 框架 页 为 xyjy. html。 

(5) 修改 xyjy_top. html 和 xyjy_buttom. html 的 网 页 背景 ,分 别 设置 为 不 同 的 颜色 ,以 
便 浏览 的 时 候 区 分 开 上 下 框架 。 修 改 之 后 选择 “文件 "菜单 中 的 “保存 全 部 ”菜单 项 。 

(6) 按 Fl2 键 ,浏览 框架 集 。 如 果 框 架 集 或 某 个 框架 未 保存 ,会 弹出 如 图 9-7 所 示 的 警 
告 框 ,如 果 单 击 “ 确 定 ” 按 钮 继续 浏览 ,就 会 看 到 某 个 框架 对 应 的 网 页 显示 “无 法 显示 网 页 ”。 
所 以 ,必须 在 浏览 框架 集 之 前 ,确保 其 中 所 有 的 框架 都 被 保存 了 。 


Dreamveaver 


人 心 浏览 器 中 预览 前 必须 保存 框架 集 文件 和 框架 文 


击 确定 保存 文件 并 预 响 框架 集 。 


Ee 


图 9-7 未 保存 框架 集 或 框架 的 警告 


注意 : 浏览 框架 集 的 时 候 , 浏 览 器 窗口 的 地 址 栏 显示 的 是 框架 集 的 名 称 ,并 没有 显示 任 
何 一 个 框架 的 名 称 。 


9.2.5 框架 集 的 属性 


在 “框架 "面板 中 选择 框架 集 之 后 ,打开 属性 面板 ,面板 上 显示 框架 集 的 属性 ,如 图 9-8 所 示 。 

(1) 边框 : 设置 在 浏览 框架 集 的 时 候 , 框 架 是 否 显 示 边 框 ,选择 “ 否 ” 和 “默认 ”选项 ,都 
不 会 显示 边框 。 

(2) 边框 宽度 : 设置 一 个 整数 值 , 控 制 框 架 的 边框 宽度 ,只 有 当 边 框 显 示 设 置 为 “是 ”的 
时 候 , 设 置 边 框 宽度 才 有 意义 。 

(3) 边框 颜色 : 选择 一 个 颜色 作为 边框 的 颜色 ,只 有 当 边 框 的 宽度 不 为 0, 并 且 边 框 显 
示 设 置 为 "是 "的 时 候 ,设置 边框 颜色 才 有 意义 。 

(4) 行 / 列 : 设置 框架 的 高 度 或 宽度 。 
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图 9-8 框架 集 属 性 面板 


9.2.6 框架 的 属性 


在 “框架 ”面板 中 选择 框架 之 后 ,打开 属性 面板 ,面板 上 显示 框架 的 属性 ,如 图 9-9 所 示 。 
(1) 框架 名 称 : 设置 了 框架 名 称 之 后 “框架 ?面板 中 将 做 出 相应 的 显示 。 
(2) 源 文件 : 源 文件 是 框架 的 一 个 重要 属性 , 它 用 来 设置 框架 将 显示 的 页 面 。 通 过 单 
击 旁边 的 画图 标 或 者 拖 动 请 | 图 标 ,都 可 以 选择 设置 框架 的 源 文件 。 
(3) 边框 : 设置 框架 的 边框 是 否 显示 ,与 框架 集 的 边框 属性 作用 相同 。 
(4) 滚动 : 用 于 设置 当 显示 的 内 容 超 出 框架 大 小 时 ,框架 是 否 出 现 滚动 条 。 一 般 选 择 
“自动 选项 ,这 样 框架 将 根据 实际 需求 来 现 显 示 滚 动 条 。 
(5) 不 能 调整 大 小 : 如 果 这 个 属性 被 选中 ,并 且 框 架 集 的 边框 有 显示 ,那么 在 浏览 框架 
集 的 时 候 , 可 以 拖 动 框架 的 边框 ,对 框架 大 小 进行 调整 。 
(6) 边框 颜色 : 同 框架 集 的 边框 颜色 属性 作用 相同 。 
杠 梁 名称。 源 文 件 G) byjytop hol | 人 局 这 EO [IAA 加 
[are | WHE | TRG EC | 
图 9-9 框架 属性 面板 


有 时 候 ,框架 要 显示 的 网 页 是 事先 制作 好 的 ,在 制作 框架 集 的 时 候 , 只 要 选择 框架 的 源 
文件 ,就 可 以 让 框架 有 显示 的 内 容 。 下 面 通过 一 个 例子 来 进行 说 明 。 
【案例 演示 9-2】 制作 校园 网 站 中 “校园 剪影 "栏目 对 应 的 网 页 ,效果 如 图 9-10 所 示 。 


| 厅 丰 了! 元 
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二， 校园 剪影。 人 政和 


9-10 “校园 剪影 "页 效果 
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(1) 运行 Fireworks, 打 开 之 前 制作 好 的 子 页 界面 设计 图 (png 格式 ), 对 它 进行 裁剪 ,分 
别 另 存 为 “校园 剪影 上 . png” 和 “校园 剪影 下 . png”, 如 图 9-11 所 示 。 


图 9-11 校园 剪影 上 . png 和 校园 剪影 下 . png 


(2) 在 Fireworks 中 ,对 “校园 剪影 上 . png” 和 “校园 剪影 下 . png” 进 行 切 片 分 割 ,然后 导 
出 ,分 别 生成 xyjy_shang. htm 和 xyjy_xia. htm 两 个 网 页 ,存放 在 校园 网 站 的 根 目录 下 ; 并 
且 导 出 相关 的 图 像 ,存放 在 根 目 录 的 图 像 文 件 夹 中 。 切 片 分 割 效果 如 图 9-12 所 示 。 


图 9-12 校园 剪影 设计 图 分 割 效果 


(3) 运行 Dreamweaver, 打 开 xyjy_shang. htm, 进 行 以 下 操作 : 设置 图 像 为 单元 格 背 
景 .添加 骨 套 表格 、 添 加 导航 栏 文字 (“ 行 政 楼 "“ 操 场 "“ 图 书馆 "“ 荔 园 ”) ,保存 网 页 。 然 后 
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打开 xyjy_xia. htm, 将 它 男 存 为 xyjy_xial. html, 并 进行 以 下 操作 : 设置 图 像 为 单元 格 背 
景 、 添 加 “行政 楼 ?图像 .保存 网 页 。 

(4) 在 Dreamweaver 中 ,打开 之 前 创建 框架 集 文档 的 xyjy. html, 选 择 上 框架 ,设置 它 
的 源 文件 为 xyjy_shang. htm, 并 调整 上 框架 的 高 度 , 使 得 xyjy_shang. htm 网 页 的 内 容 能 够 
全 部 显示 ; 选择 下 框架 ,设置 它 的 源 文件 为 xyjy_xial. html。 设 置 完成 后 保存 全 部 。 

(5) 修改 xyjy_xial. html 的 页 面 属性 ,选择 分 类 中 的 “外 观 ”, 设 置 “ 上 边 距 ” 为 0, 对 
xyjy_shang. htm 的 页 面 属性 做 同样 的 设置 对 上 框架 的 高 度 进行 再 次 调整 。 设 置 完 成 后 
保存 全 部 。 按 F12 键 浏览 ,查看 效果 。 

(6) 如 果 设 置 下 框架 的 时 候 , 在 框架 的 顶部 总 是 会 出 现 一 个 细小 的 缝隙 , 那 是 因为 在 导 
出 xyjy_xia. htm 时 ,选择 了 间距 使 用 间隔 符 图 像 。 在 Fireworks 中 可 进行 修改 ,在 导出 网 
页 的 窗口 中 , 单 击 “选项 按钮 ,弹出 “HTML 设置 ”对话 框 ,在 “表格 ”中 设置 “间距 ”为 “ 榜 套 
表格 ,无 间隔 符 ”, 如 图 9-13 所 示 。 


常规 | 表格 ”| 文档 特定 信息 


间 肛 8) [E22 
全 单元 格 
单元 格 毅 色 CE) 。 。 器] 使 用 画布 颜色 四 

内 容 0); | 间 际 罕 图 像 


图 9-13 导出 时 的 HTML 设置 


SS 任务 9.1 
内 容 : 制作 自己 负责 的 校园 网 站 的 “校园 剪影 "页 ,要求 使 用 框架 集 。 


9.3 框架 集中 的 超 链 接 


在 第 5 章 中 介绍 了 超 链接 的 一 个 重要 属性 一 一 目标 ,该 属性 用 来 设置 浏览 网 页 时 使 
的 目标 窗口 。 之 前 了 解 到 ，blank 表示 使 用 新 的 浏览 器 窗口 ,如 果 什 么 都 不 设置 ,表示 使 
当前 的 浏览 器 窗口 。 现 在 ,在 框架 集 使 用 的 浏览 器 窗口 中 ,由 于 被 分 割 成 了 多 个 小 窗口 , 因 
此 在 设置 超 链接 的 目标 属性 时 ,就 多 了 一 些 选 择 。 比 如 ,可 以 设置 超 链接 的 目标 网 页 在 框架 
集中 的 某 个 框架 窗口 打开 ; 或 者 设置 网 页 在 整个 框架 集 窗口 打开 。 

在 框架 集中 设置 超 链接 的 目标 时 .一般 有 以 下 几 种 选择 。 

(1) _parent, 代 表 “ 父 窗口 "。 如 果 超 链接 的 “目标 ”设置 为 _parent, 就 表示 打开 这 个 超 
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链接 的 目标 对 象 时 ,将 使 用 当前 窗口 的 上 一 层 窗口 。 如 果 框 架 集 里 面 只 有 两 层 框架 ,那么 将 
使 用 当前 整个 浏览 器 窗口 打开 目标 页 面 。 

(2) _top, 代 表 “ 顶 层 窗 口 "。 如 果 超 链接 的 “目标 ”设置 为 _top, 就 表示 打开 这 个 超 链接 
的 目标 对 象 时 ,将 使 用 当前 窗口 的 最 顶层 窗口 。 不 管 框架 集 有 多 少 层 框架 典 套 ,都 将 使 用 当 
前 整个 浏览 器 窗口 打开 目标 页 面 。 

(3) 框架 名 。 如 果 超 链接 的 “目标 ”设置 为 某 个 框架 的 名 称 ,就 表示 将 使 用 框架 集中 的 
某 个 框架 来 显示 目标 页 面 。 

(4) _self 或 不 做 任何 设置 ,都 代表 “当前 窗口 "。 如 果 超 链接 的 “目标 "设置 为 _self, 就 
表示 打开 这 个 超 链接 的 目标 对 象 时 ,将 使 用 当前 的 浏览 器 窗口 。 在 框架 集中 ,将 使 用 当前 框 
架 来 显示 目标 页 面 。 

【案例 演示 9-3】 制作 “校园 剪影 "网 页 中 的 导航 ,要 求 单 击 任何 一 个 景点 链接 ,对 应 的 
目标 网 页 都 将 显示 在 框架 集 的 下 框架 中 ,效果 如 图 9-14 和 图 9-15 所 示 。 
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图 9-14 校园 剪影 中 框架 集 的 应 用 效果 1 


(1) 运行 Dreamweaver, 打 开 xyjy_xia. htm, 男 存 为 xyjy_xia2. html, 然 后 进行 以 下 操 
作 : 设置 图 像 为 单元 格 背 景 、 添 加 操场 图 像 、 保 存 网 页 。 

(2) 通过 和 步骤 (1) 相 同 的 方式 ,制作 xyjy_xia3. html 和 xyjy_xia4. html, 分 别 添加 “图 
书馆 ”和 * 功 园 ” 图 像 。 

(3) 在 Dreamweaver 中 打开 xyjy. html( 注 意 ,必须 打开 整个 框架 集 网 页 ,不 能 只 打开 
上 框架 对 应 的 网 页 ) ,选择 “行政 楼 ”, 设 置 链接 为 xyjy_xial. html, 目 标 为 mainFrame。 

(4) 重复 步骤 (3) 的 操作 ,分 别 选 择 “ 操 场 "“ 图 书馆 ”“ 荔 园 ”, 设 置 链 接 为 xyjy_xia2. 
html、xyjy_xia3. html、xyjy_xia4. html, 目 标 均 为 mainFrame。 

(5) 设置 完成 后 保存 全 部 。 按 F12 键 ,浏览 “校园 剪影 ”网 页 ,查看 导航 栏 的 链接 效果 。 
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注意 ,在 单 击 导航 链接 的 过 程 中 ,浏览 器 窗口 始终 没有 切换 ,并 且 浏 览 器 的 地 址 栏 显示 
的 始终 是 xyjy. html 这 个 网 页 的 地 址 。 

另外 ,如 果 在 步骤 (3) 中 ,打开 的 是 xyjy_shang. htm, 那 么 设置 超 链接 的 目标 时 ,在 下 拉 
列表 中 找 不 到 mainFrame, 因 为 xyjy_shang. htm 页 不 存在 框架 。 

【案例 演示 9-4】 制作 “校园 剪影 ”网 页 中 的 导航 ,要 求 添加 一 个 “返回 主页 ”的 链接 , 打 
开 主 页 时 使 用 当前 整个 框架 集 所 使 用 的 浏览 器 窗口 。 

(1) 运行 Dreamweaver, 打 开 xyjy. html, 在 上 框架 的 导航 栏 中 添加 “返回 主页 ”, 如 图 9-16 
所 示 。 


= 


县 ys” 校园 剪影 返回 主页 
图 9-16 添加 “返回 主页 ” 


(2) 选择 “返回 主页 ” ,设置 链接 为 index. htm, 目 标 为 _top 或 _parent, 然 后 保存 全 部 设 
置 , 按 F1l2 键 ,浏览 xyjy. html, 查 看 导航 中 “返回 主页 ”的 超 链 接 效 果 。 

注意 ,如 果 把 “返回 主页 ”的 超 链接 目标 设置 为 _self 或 什么 都 不 设置 ,那么 浏览 xyjy. 
html 时 单 击 “ 返 回 主 页 ” 超 链接 ,看 到 的 效果 就 会 如 图 9-17 所 示 , 这 种 情况 是 不 应 该 出 
现 的 。 
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9-17 “返回 主页 "链接 目标 出 错 


< 任务 9.2 


内 容 : 

(1) 制作 “校园 剪影 页 的 导航 ,要 求 添加 “返回 主页 ”的 超 链接 。 

(2) 根据 校园 网 站 的 需求 分 析 报告 ,制作 * 系 部 导航 "栏目 下 的 各 个 系 部 页 面 , 要 求 使 用 
上 下 或 左右 结构 的 框架 集 ,制作 方法 参考 “校园 剪影 " 子 页 。 


9.4 关于 HTML: 框架 集 、 框 架 和 内 嵌 框 架 


9.4.1 框架 集 frameset 


当 在 Dreamweaver 编辑 窗口 中 选中 整个 框架 集 时 ,切换 到 代码 视图 ,就 可 以 看 到 框架 
集 对 应 的 代码 ,比如 “校园 剪影 ”页面 的 框架 集 对 应 的 代码 如 下 : 
<frameset rows = "209,411* " cols="*" framespacing = "0" frameborder = "no" border = "0" > 
< frame src = "xyjy_shang. htm" name = "topFrame" scrolling = "No" id = "topFrame" /> 
< frame src = "xyjy xial.htm]l" name = "mainFrame" id = "mainFrame" /> 
</frameset > 
其 中 , frameset 代表 框架 集 , 它 是 成 对 出 现 的 标签 : 二 frameset 二 到 /frameset 二。 
frameset 的 常见 属性 及 其 含义 如 下 。 
(1) rows, 表 示 框 架 集中 行 的 分 割 情 况 。 一 般 属性 值 是 一 串 整 数 ,多 个 整数 值 之 间 用 去 
号 分 隔 开 ,每 个 整数 代表 每 一 行 的 高 度 , 比 如 上 面 代码 中 的 “209,411”。 如 果 框 架 集中 只 有 
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左右 框架 ,那么 rows 的 值 设置 为 x 。 

(2) cols ,表示 框架 集中 列 的 分 割 情 况 , 其 属性 值 的 设置 形式 和 含义 跟 rows 类 似 。 如 果 
框架 集中 只 有 上 下 框架 ,那么 cols 的 值 设置 为 x 。 

(3) framespacing, 用 来 设置 框架 中 的 内 容 与 框架 边界 的 距离 ,其 属性 值 是 一 个 整数 。 
一 般 情 况 下 ,framespacing 的 值 和 border 的 值 相等 ,如 果 framespacing 的 值 大 于 border, 那 
么 框架 中 显示 的 网 页 内 容 跟 框架 的 边 之 间 , 将 出 现 缝隙 。 比 如 把 xyjy. html 框架 集中 的 
framespacing 设置 为 10, border 设置 为 0, 那么 上 下 框架 之 间 就 会 出 现 缝隙 ,如 图 9-18 
所 示 。 


且 ”校园 前 影 


图 9-18 框架 之 间 出 现 缝隙 


(4) frameborder, 用 来 设置 框架 集 的 边框 是 否 显示 。 其 值 主要 有 “no” 和 “yes” 两 种 ,如 
果 是 no, 表 示 不 显示 框架 集 的 边框 ; 如 果 是 yes, 则 表示 显示 ; 如 果 frame 标签 中 没有 改 属 
性 的 任何 设置 , 则 表示 默认 为 不 显示 。 

(5) border, 表 示 框 架 集 边 框 的 宽度 ,一 般 属性 值 是 一 个 整数 ,如 果 设 置 为 “0”, 表 示 不 
显示 框架 集 的 边框 。 

(6) bordercolor, 用 来 设置 框架 集 的 边框 颜色 。 

【案例 演示 9-5】 编写 一 个 框架 集 ,要求 具 有 左右 框架 的 结构 ,并 且 显 示 框 架 集 边 框 ， 
边框 颜色 为 并 990000。 

HTML 代码 编写 如 下 : 


< frameset rows = " *" cols = "179, x*" framespacing = "1" frameborder = "yes" border = "1" 


bordercolor = "#990000"> 
</frameset > 


9.4.2 框架 frame 


框架 对 应 的 HTML 标签 是 frame, 该 标签 页 是 单独 出 现 的 : 二 frame / 之 。 它 的 常见 属 
性 及 其 含义 如 下 。 

(1) src, 用 于 设置 框架 的 源 文件 , 它 的 属性 值 是 一 个 相对 路 径 。 

(2) name, 用 于 设置 框架 的 名 称 , 它 的 属性 值 是 一 个 字符 串 。 

(3) scrolling, 用 于 设置 框架 是 否 显示 滚动 条 。 它 的 属性 值 有 auto .no yes 三 种 。 分 别 
表示 根据 实际 情况 需要 来 显示 \ 不 显示 、 一 定 会 显示 。 

(4) id, 用 于 设置 框架 在 代码 中 的 “身份 ”, 默 认 情况 下 它 的 属性 值 跟 name 一 样 。 在 网 
页 代码 中 ,如 果 需 要 使 用 某 个 框架 ,一 般 是 通过 框架 的 id 来 引用 这 个 框架 。 这 方面 的 知识 ， 
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在 动态 网 站 代码 编写 或 一 些 特效 Script 代码 编写 中 , 才 会 涉及 ,在 此 不 展开 介绍 。 

(5) noresize, 用 来 设置 在 浏览 框架 集 网 页 的 时 候 , 是 否 能 调整 框架 的 大 小 , 它 的 值 就 一 
个 : noresize。 如 果 在 frame 标签 中 设置 noresize 王 "noresize" ,表示 不 能 调整 框架 的 大 小 ， 
如 果 frame 标签 中 没有 这 个 属性 的 任何 设置 , 则 表示 可 以 调整 框架 大 小 。 

(6) frameborder, 用 来 设置 框架 的 边框 是 否 显 示 。 其 值 主要 有 “no” 和 “yes” 两 种 ,如 果 
是 no, 表 示 不 显示 框架 集 的 边框 ; 如 果 是 yes, 则 表示 显示 ; 如 果 frame 标签 中 没有 修改 属 
性 的 任何 设置 , 则 表示 默认 为 不 显示 。 

(7) bordercolor, 用 来 设置 框架 的 边框 颜色 。 

【案例 演示 9-6】 编写 一 个 框架 ,要 求 源 文件 为 xyjy_shang. htm, 框 架 名 为 topFrame， 
自动 显示 滚动 条 ,显示 框架 边框 ,边框 颜色 为 #993399, 并 且 不 允许 在 浏览 的 时 候 调整 框架 
大 小 。 

HTML 代码 编写 如 下 : 


< frame src = "xyjy_ shang. htm" name = "topFrame" frameborder = "yes" scrolling = "auto" 
noresize = "noresize" bordercolor = "#993399" /> 


9.4.3 ”内 嵌 柜 架 iframe 


内 嵌 框 架 是 一 种 特殊 的 框架 , 它 可 以 帮助 把 一 个 网 页 的 内 容 嵌 入 另 一 个 网 页 当中 显示 ， 
不 受 网 页 布局 的 限制 。 内 和 骸 框 架 跟 普 通 的 框架 相 比 而 言 , 更 具有 优势 ,因为 其 使 用 方式 更 加 
灵活 。 

内 艇 框架 的 HTML 标签 是 一 iframe 二 一 /iframe> ,在 Dreamweaver 比较 早 的 版 本 中 ， 
添加 内 内 框架 必须 在 网 页 的 代码 视图 中 手动 编写 二 iframe 二 二 /iframe 之 标签 , 现在 ， 
Dreamweaver 的 CS 版 本 为 添加 内 嵌 框 架 提供 了 更 加 便捷 的 操作 方式 。 

在 Dreamweaver 中 打开 要 添加 内 钳 框 架 的 网 页 ,并且 打 乒 和 II 
开 * 搬 和 人? 面板 ,切换 到 布局 类 型 ,在 面板 的 工具 列表 中 ,可 以 有 局 = 
找到 IFRAME, 如 图 9-19 所 示 。 把 光标 定位 在 网 页 中 要 添加 [之 
内 嵌 框 架 的 地 方 ,然后 单 击 * 插 入 "面板 中 的 IFRAME, 就 可 以 本 和 


| ~ 


添加 一 个 内 嵌 框 架 。 证! po 
iframe 标签 的 常见 属性 如 下 。 DD -tes : WE 国 
(1) width, 用 于 设置 内 嵌 框 架 的 宽度 ,其 属性 值 为 一 个 
整数 。 9-19 IFRAME 工具 在 
(2) height, 用 于 设置 内 嵌 框 架 的 高 度 ,其 属性 值 为 一 个 布局 面板 中 
整数 。 
(3) src, 用 于 设置 内 嵌 框 架 要 显示 的 文档 ,一 般 是 一 个 网 页 文档 。src 的 属性 值 是 一 个 
文档 的 相对 路 径 。 


(4) frameborder, 用 来 设置 内 嵌 框 架 的 边框 是 否 显示 。 其 值 主 要 有 0 和 1 两 种 ,如 果 是 
0, 表 示 不 显示 框架 集 的 边框 ; 如 果 是 1, 则 表示 显示 。 

(5) scrolling, 用 于 设置 内 嵌 框 架 是 否 显示 深 动 条 。 它 的 属性 值 有 auto、no、yes 三 种 ， 
分 别 表示 根据 实际 情况 需要 来 显示 、 不 显示 一定 会 显示 。 
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(6) name, 用 于 设置 内 嵌 框 架 的 名 称 , 它 的 属性 值 是 一 个 字符 串 。 
【案例 演示 9-7】 在 网 页 上 添加 一 个 内 赃 框 架 , 显 示 info. html 网 页 的 内 容 ,效果 如 
图 9-20 所 示 。 


图 9-20 内 嵌 框 架 示例 


(1) 运行 Dreamweaver, 打 开 要 添加 内 嵌 框 架 的 网 页 ,光标 定位 在 要 添加 内 肉 框 架 的 位 
置 ,然后 切换 到 代码 视图 。 

(2) 打开 Dreamweaver 的 “插入 ”面板 ,选择 “布局 "类型, 单 击 IFRAME。 

(3) 在 代码 视图 的 二 iframe 二 标签 中 添加 属性 ,代码 如 下 : 


< iframe width= "400" src= "info. html" frameborder = "1" height = "200" scrolling = "yes" name 
= "info"></iframe> 


(4) 保存 网 页 , 按 F12 键 浏览 ,查看 效果 。 
SS 任务 9.3 
内 容 : 制作 “学 校 简介 ”和 “机 构 设置 "两 个 栏目 对 应 的 子 页 ,分 别 保存 为 xxjj. htm 和 


jgsz. htm 。 


网 页 制作 : 多 层 导航 


本 章 介绍 校园 网 站 中 下 拉 菜 单 的 两 种 制作 方法 : 使 用 Dreamweaver 中 的 Spry 菜单 栏 
控件 以 及 使 用 Fireworks 中 的 设置 弹出 菜单 行为 。 主 要 介绍 Spry 菜单 栏 的 添加 和 修改 , 包 
括 内 容 和 样式 的 修改 ,同时 介绍 Spry 菜单 栏 对 应 的 HTML 代码 。 另 外 ,还 介绍 
Dreamweaver 中 鼠标 经 过 图 像 的 应 用 ,并 使 用 它 制作 导航 栏 上 的 动态 按钮 。 

本 章 学 习 要 点 : 

(1) 了 解 Spry 控件 

(2) 理解 Spry 菜单 栏 对 应 的 HTML 代码 

(3) 理解 行为 在 Fireworks 中 的 作用 

(4) 掌握 Spry 菜单 栏 的 添加 和 修改 

(5) 掌握 在 Fireworks 中 添加 行为 的 方法 

(6) 掌握 Fireworks 中 弹出 菜单 行为 的 使 用 

(7) 掌握 鼠标 经 过 图 像 的 使 用 


在 很 多 网 站 的 主页 中 ,导航 栏 一 般 都 含有 下 拉 菜 单 ,因为 一 个 栏目 下 可 能 又 分 出 多 个 子 
栏目 ,将 这 样 的 导航 栏 叫 做 “多 层 导航 栏 ”"。 在 Adobe 提供 的 网 站 开发 软件 中 ,Dreamweaver 
和 Fireworks 都 可 以 实现 多 层 导 航 栏 的 制作 。 


10.1 在 Dreamweaver 中 制作 多 层 导航 


10.1.1 Spry 控件 


在 Dreamweaver CS 版 本 出 现 之 前 ,该 软件 并 没有 提供 关于 Spry 控件 的 使 用 。 了 解 
Spry 控件 ,首先 要 了 解 JavaScript。 简 单 地 说 ,JavaScript 是 一 种 用 来 制作 网 页 特效 的 编程 
语言 , 它 的 语法 简单 .运行 速度 较 快 , 且 能 被 浏览 器 直接 识别 ,所 以 应 用 广泛 。Spry 是 一 个 
“ 库 ”, 它 包含 了 多 个 由 JavaScript 编写 的 网 页 特效 控件 ,这 些 控 件 主要 有 菜单 栏 .选项 卡 式 
面板 . 折 笃 式 .可 折 三 面 板 。 在 Dreamweaver 中 ,Spry 控件 配合 使 用 CSS 样式 和 HTML 代 
码 , 有 时 候 再 加 上 一 点 点 JavaScript 代码 ,就 可 以 制作 出 特殊 效果 的 页 面 元 素 。 

选择 Dreamweaver 的 “窗口 ”插入 ” 命 令 , 打 开 * 插 和 人 ?面板 ; 或 者 直接 按 Ctrl 十 F2 
键 ,也 可 以 打开 或 关闭 “插入 ”面板 。 在 “插入 ”面板 中 ,选择 “布局 ”类 型 ,就 可 以 看 到 Spry 控 
件 工具 ,如 图 10-1 所 示 。 

1. Spry 菜单 栏 

Spry 菜单 栏 可 制作 网 页 上 的 导航 栏 , 包 括 导航 栏 中 需要 的 下 拉 菜 单 ,如 图 10-2 上 图 所 
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示 ; 比如 淘宝 首页 上 端的 导航 栏 , 如 图 10-2 下 图 所 示 。 


E22 | 

布局 了 

标准 | 扩展 

i EN ， -，， 
给 制 好 Div 

| 国 sp 桨 六 | 
四 spzy 过 项 不 式 面 板 

国 py 折 式 

区 5pry 可 折 查 面板 我 要 买 ”| 我 的 淘宝 v | 卖家 中 心 ” | 服务 中 心 


10-1 添加 “Spry 菜单 栏 ?的 图 10-2 Spry 菜单 栏 示例 
工具 按钮 


2. Spry 选项 卡 式 面 板 

Spry 选项 卡 式 面板 用 来 制作 网 页 中 的 重 倒 式 面板 ,每 个 面板 有 一 个 标签 ,它们 重合 在 
一 起 ,通过 单 击 标签 ,可 以 打开 不 同 的 面板 ,看 到 不 同 的 内 容 , 如 图 10-3 左 图 所 示 ; 比如 淘 
宝 首 页 的 公告 论坛 .规则 等 面板 的 全 放 效 果 如 图 10-3 右 图 所 示 。 


[ra 


内 容 1 内 容 1 内 容 1 

内 容 1 内 容 1 内 容 1 公告 ”论坛 规则 安全 保障 。 公益 
内 容 1 内 容 内容 1 * 春节 息 期 快递 安排 出 炉 ”司法 拍卖 或 格 异 劲 网 络 
内 容 1 内 容 1 内 容 1 * 抢 座 节 畦 价 机 票 * 淘宝 商城 正式 更 名 天 猎 


图 10-3 ”Spry 选项 卡 式 面板 示例 


3. Spry 折叠 式 

Spry 折 县 式 用 来 制作 多 个 垂直 排放 的 面板 ,每 个 面板 带 有 一 个 标签 , 单 击 标签 时 能 查 
看 到 对 应 面板 的 内 容 。 每 次 有 且 只 有 一 个 面板 处 于 被 打开 的 状态 ,其 他 面板 是 收 起 的 状态 ， 
只 显示 标签 ,如 图 10-4 所 示 。 


标签 1 标 答 1 

内 容 1 内 容 1 内 容 1 标签 2 

内 容 1 内 容 1 内 容 1 内 容 2 内 容 2 内 容 2 
内 容 2 内 容 2 内 容 2 

标签 2 

| 琶 签 3 标签 3 


图 10-4 Spry 折合 式 多 面板 示例 


4. Spry 可 折 又 面板 

Spry 可 折 倒 面板 只 用 来 制作 一 个 面板 , 单 击 该 面板 的 标签 ,可 以 打开 或 关闭 该 面板 。 
如 果 在 网 页 上 添加 多 个 Spry 可 折叠 面板 ,这 些 面板 可 同时 处 于 被 打开 或 被 关闭 的 状态 ,如 
图 10-5 所 示 ,这 一 点 不 同 于 Spry 折 倒 式 。 
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标签 


[ee 
容 内 容 内 容 内 容 内 容 


标签 


内 容 内 容 内 容 内 容 内 容 


ponenanns 要 一 一 一 


图 10-5 两 个 Spry 可 折 难 面板 示例 


10.1.2 Spry 菜单 栏 


1. 添加 Spry 菜单 栏 

(1) 打开 要 添加 菜单 栏 的 网 页 ,光标 定位 在 要 添加 的 位 置 。 

(2) 打开 “插入 ”面板 ,选择 “布局 "工具 , 单 击 “Spry 菜 
单 栏 "按钮 ,这 时 会 弹出 一 个 设置 对 话 框 ,如 图 10-6 所 示 ， 

四 请 选择 所 斋 的 布局 。 

要 求 选择 所 需 的 布局 ,通过 对 话 框 可 以 很 清楚 地 看 到 “水 Sh = 
平 "和 “垂直 ”两 种 布局 的 样式 ,这 里 选择 水平" 样式 ,确定 oo 图 aa 
之 后 在 网 页 上 就 插入 一 个 Spry 菜单 栏 (如 图 10-2 所 示 ) 。 

(3) 先 把 网 页 保存 一 下 。 如 果 在 该 页 面 上 是 第 一 次 使 
用 Spry 菜单 栏 控件 ,保存 网 页 的 时 候 会 弹出 一 个 对 话 框 ， 
提示 “此 页 使 用 的 对 象 或 行为 需要 支持 文件 ”, 所 以 要 把 相 
关 的 文件 复制 到 本 站 点 的 根 目录 下 。 单 击 “ 确 定 ” 按 钮 之 后 ,在 站 点 文件 面板 中 会 看 到 生成 
一 个 名 字 为 “SpryAssets” 的 文件 夹 , 打 开 文 件 夹 , 里 面 是 一 些 gif 图 像 文件 \js 文件 和 css 文 
件 , 如 图 10-7 所 示 , 这 些 文件 是 Dreamweaver 自动 生成 的 。js 文件 就 是 使 用 JavaScript 编 
写 的 代码 文件 ,用 来 定义 菜单 的 功能 。 打 开 css 文件 ,可 以 看 到 定义 了 一 些 样式 ,这 些 样式 
用 来 修饰 菜单 栏 的 各 个 部 分 。 

提示 : 可 以 对 js 文件 和 css 文件 进行 修改 ,来 改善 菜单 栏 的 功能 或 改变 它 的 外 观 。 


Spry 菜单 栏 


图 10-6 设置 Spry 菜单 栏 布 局 


复制 相关 文件 


由 多 的 二 ee 


SpryAssets/SpryllenuBar. js 
SpryAssets/SpryllenuBarDown. gif 
Spryhssets/SpryllennBarDownlover. gif 
Spryhssets/SpryllenuBarHorizontal. ess 


SpryAssets/SpryllenuBarRight gif 
Spryhssets/SprlenuBarRightHover. gif 


图 10-7 与 Spry 菜单 栏 相关 的 文件 


(CF L130 网 站 开发 基础 教程 


2. Spry 菜单 栏 的 HTML 代码 
添加 完 菜单 栏 之 后 ,切换 到 网 页 的 代码 视图 ,看 到 Spry 菜单 栏 对 应 的 HTML 代码 
如 下 : 


<ul id = "MenuBarl" class = "MenuBarHorizontal"> 
<1i><aclass = "MenuBarItemSubmenu"”href =" 井 "> 项 目 1</a> 
<ul> 
<1li><a href ="#"> 项 目 1.1</a></1i> 
<1i><a href ="#"> 项 目 1.2</a></1i> 
<1li><a href ="#"> 项 目 1.3</a></1i> 
</ul> 
</li> 
<1i><a href ="#"> 项 目 2</a></li> 
<1i><a class = "MenuBarItemSubmenu”href =" 井 "> 项 目 3</a> 


<ul> 
<1i><a class = "MenuBarItemSubmenu"” href ="# "> 项 目 3.1</a> 
<ul> 
<1i><ahref ="#"> 项 目 3.1.1</a></1i> 
<1i><ahref=" 井 "> 项 目 3.1.2</a></1i> 
</ul> 
</1i> 


<1i><ahref ="#"> 项 目 3.2</a></1i> 
<1i><a href ="#"> 项 目 3.3</a></1i> 
</ul> 
</1i> 
<1i><a href ="#"> 项 目 4</a></1i> 
</ul> 


这 段 代码 的 机 构 和 含义 如 下 。 

(1) 最 外 层 的 二 ul 二 三/ul 二 代表 整个 菜单 栏 ,菜单 栏 的 名 称 叫 MenuBarl ,使 用 的 样式 
名 为 MenuBarHorizontal。 

(2) 在 第 二 层 代码 中 ,每 一 个 过 li> 过 /li 忆 代 表 一 个 水 平方 向 上 的 菜单 选项 , 即 “ 项 目 1”、 
“项 目 2”“ 项 目 3”“ 项 目 4”, 它 们 是 菜单 栏 里 面 的 一 级 菜单 选项 , 它 的 超 链接 文本 使 用 的 
样式 名 为 MenuBarltemSubmenu。 

(3) 在 一 级 菜单 选项 “项 目 1”" 和 “项 目 3" 中 又 各 自 包含 一 个 ul 之 过 /ul 之 ,里 面 的 每 一 
个 过 li 这 ></li 人 > 代表 二 级 菜单 选项 ,比如 “项 目 1. 1"“ 项 目 1. 2?“ 项 目 1.3” 以 及 “项 目 3. 1”、 
“项 目 3.2”“ 项 目 3. 3”。 

(4) 在 二 级 菜单 选项 “项 目 3.1” 中 ,包含 一 个 代表 三 级 菜单 选项 的 二 ul 二 二 /ul 二 ,其 中 
每 一 个 过 li 过/li 忆 代表 一 个 选项 ,有 “项 目 3.1.1” 和 “项 目 3. 1. 2? 两 个 。 

另外 ,前 面 介绍 过 ,二 a 二 二 /a 二 标签 代表 超 链 接 , 其 中 的 href 属性 用 来 设置 超 链接 的 
对 象 ,在 这 里 它 的 初始 值 是 “并 ”, 代 表 当 前 只 是 一 个 空 链接 ,通过 后 续 的 设置 ,每 个 href 属 
性 都 会 被 赋予 一 个 具体 的 值 。 

3. 修改 Spry 菜单 栏 内 容 

Spry 菜单 栏 的 初始 内 容 包括 文本 和 选项 数量 ,一般 都 不 符合 要 求 , 所 以 需要 对 它们 进 
行 修改 。 修 改 的 主要 操作 在 菜单 栏 的 属性 面板 上 进行 。 
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单 击 网 页 上 的 Spry 菜单 栏 ,在 网 页 编辑 窗口 下 方 的 标签 栏 上 选择 
二 ul. MenuBarHorizontal# MenuBarl 放 ,选中 整个 菜单 栏 。 在 “属性 ”面板 上 ,显示 菜单 栏 
的 属性 ,如 图 10-8 所 示 。 


10-8 ”Spry 菜单 栏 属性 面板 


在 “属性 ”面板 上 ,可 以 通过 左 侧 MenuBarl 栏 修改 菜单 栏 的 名 称 。 从 菜单 栏 名 称 往 右 ， 


分 别 是 3 个 列表 ,显示 一 ,二 ,三 级 菜单 选项 ,通过 过 和 me 按钮 ,可 以 添加 或 删除 菜单 项 。 
选中 每 一 个 菜单 项 ,在 “属性 ”面板 的 右 侧 ,可 以 设置 这 个 菜单 项 的 文本 内 容 、 超 链接 目标 、 超 
链接 的 标题 属性 和 目标 窗口 。 


【案例 演示 10-1】 修改 菜单 栏 , 效 果 如 图 10-9 所 示 ,设置 相关 链接 ,目标 都 是 _blank。 


图 10-9 校园 网 站 中 菜单 栏 的 初始 效果 


修改 步骤 如 下 。 

(1) 选中 网 页 上 的 Spry 菜单 栏 对 象 ,在 “属性 ”面板 上 “项 目 1” 所 在 的 列表 中 , 单 击 列表 
上 方 的 各 按钮 ,一 共 添 加 7 个 一 级 菜单 项 。 

(2) 在 一 级 菜单 项 列表 中 ,选择 第 一 个 ,修改 其 文本 属性 为 "学校 概况 ”, 链 接 属性 为 
“#”。 其 他 菜单 项 ,也 分 别 修改 文本 属性 ,链接 属性 都 设置 为 “# ”, 每 个 属性 值 输入 完 都 要 
按 Enter 键 ,表示 确认 修改 。 

(3) 在 “属性 ”面板 上 ,选择 一 级 菜单 项 学校 概况 ”, 然 后 在 二 级 菜单 项 列表 中 ,确保 已 
经 添加 了 3 个 选项 ,并 分 别 选择 这 3 个 二 级 菜单 项 ,设置 其 文本 属性 分 别 为 “学 校 简介 ”“ 校 
园 剪 影 "“ 机 构 设 置 ”, 并 设置 其 链接 属性 分 别 为 xxjj. htm、xyjy. html\jgsz. htm, 目标 属性 
均 为 _blank。 

(4) 按照 步骤 (3) 的 操作 方法 ,为 一 级 菜单 项 “公共 服务 "“ 系 部 导航 "“ 部 门 导 航 ” 分 别 
添加 二 级 菜单 项 ,并 设置 其 文本 链接、 目标 这 3 个 属性 ,如 果 对 应 的 子 页 还 未 创建 ,将 链接 
设置 为 *#”。 

(5) 分 别 选择 一 级 菜单 项 “新 闻 中 心 ”“ 通 知 公告 "“ 科 研 工作 ”, 如 果 在 二 级 菜单 项 列 
表 中 出 现 选项 , 单 击 列表 上 方 的 于 按钮 ,将 它们 删除 。 

4. 修改 Spry 菜单 栏 样式 

Spry 菜单 栏 的 初始 样式 是 比较 简单 的 ,也 比较 朴素 。 为 了 网 页 的 美观 效果 ,需要 对 菜 
单 栏 进行 一 番 “ 装 饰 ”。 
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修改 菜单 栏 的 样式 ,要 先 了 解 菜 单 栏 使 用 的 样式 。 在 当前 网 页 编辑 窗口 中 , 按 Shift 十 
Fl1 键 ,打开 “CSS 样式 ”面板 。 在 样式 面板 中 ,能 够 看 到 当前 的 菜单 栏 使 用 的 所 有 样式 名 ， 
如 图 10-10 所 示 。 


EE 


Sprylenbarforizontal, ess 
,NenuBarHorizontal 

ul NenuBarActive 
,NenuBarHorizontal 1i 
.NenuBarHorizontal tl 
.NenuBarlHorirontal ul.NenuBarSubmenuVisible 

,NenuBarHorizontal 要 了 

,NenuBarHorizontal 

.NenuBarHorizontsl a Bnd ti .NenuBarSubnenuyisible 
.NenuBarHorizontal 

.NenuBarHorirontsl a 

.NenuBarHorizontal a:hover, ul.MWenuBarHorizontal a:focus 

.NenuBarHorizontal a MenuBarItemHover, ul.NernuBarHorizontal & MenuBarTtemSubme 
.NenuBarHorirontal a MenuBarTtemSubmenu 

.NenuBarHorizontal ul & MenuBarTtemSubmenu 

.NenuBarlorizontal a MenuBarItemSubmenu}over 

.NenuBarHorizrontsl ul & NenuBarItemSubmenullover 

.NenuBarHorizontal iframe 

uu. NenuBarHorizontal 1i.MenuBarItemIP 


图 10-10 Spry 菜单 栏 的 相关 样式 


主要 样式 的 作用 如 下 。 

(1) ul. MenuBarHorizontal ,用 来 修饰 整个 水 平 菜单 栏 。 

(2) ul. MenuBarHorizontal li, 用 来 修饰 菜单 栏 中 的 一 级 菜单 项 。 

(3) ul. MenuBarHorizontal ul, 用 来 修饰 菜单 栏 中 的 二 级 菜单 。 

(4) ul. MenuBarHorizontal ul li, 用 来 修饰 菜单 栏 中 的 二 级 菜单 项 。 

(5) ul. MenuBarHorizontal a, 用 来 修饰 菜单 栏 中 的 超 链接 文本 。 

(6) ul. MenuBarHorizontal a. hover, 用 来 修饰 菜单 栏 中 超 链 接 文本 的 悬 停 状态 。 

(7) ul. MenuBarHorizontal a. MenuBarItemHover, 用 来 修饰 菜单 栏 中 弹出 子 菜单 时 ， 
一 级 菜单 项 的 外 观 。 

【案例 演示 10-2】 修改 菜单 栏 , 效 果 如 图 10-11 所 示 。 


公共 服务 > 系 部 导航 > 部 门 导航 ~ 新 闻 中 心 ”通知 公告 ”科研 工作 


图 10-11 使 用 样式 修饰 后 的 菜单 栏 


修改 步骤 如 下 。 

(1) 在 Dreamweaver 中 打开 Spry 菜单 栏 所 在 的 网 页 ,再 打开 *CSS 样式 ”面板 。 

(2) 在 样式 面板 中 ,选择 ul. MenuBarHorizontal, 在 下 方 的 样式 属性 列表 中 ,选择 
font-size, 修 改 其 值 为 9pt。 

(3) 选择 ul. MenuBarHorizontal li, 修 改 属性 width 的 值 为 75px。 

(4) 选择 ul. MenuBarHorizontal ul ,修改 属性 width 的 值 为 100px。 
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(5) 选择 ul. MenuBarHorizontal ul li, 修 改 属性 width 的 值 为 100px。 

(6) 选择 ul. MenuBarHorizontal a, 修 改 属性 background-color 的 值 为 # FFF, 修 改 
color 的 值 为 #333。 

(7) 选择 ul. MenuBarHorizontal a. hover, 修 改 属性 background-color 的 值 为 #09F, 修 
改 color 的 值 为 # FFF。 

(8) 选择 ul. MenuBarHorizontal a. MenuBarItemHover, 修 改 属性 background-color 的 
值 为 # CCC ,修改 color 的 值 为 # FFF。 

5. 复制 或 删除 Spry 菜单 栏 

Spry 菜单 栏 做 好 后 ,可 能 其 他 网 页 也 需要 一 模 一 样 的 菜单 栏 ,那么 可 以 复制 它 ; 如 果 
不 需要 了 ,也 可 以 把 它 删除 。 无 论 是 复制 还 是 删除 ,都 要 先 选 中 菜单 栏 。 

首先 , 单 击 网 页 上 的 Spry 菜单 栏 ,在 网 页 编辑 窗口 下 方 的 标签 栏 上 选择 过 ual. 
MenuBarHorizontal# MenuBarl 过 ,选中 整个 菜单 栏 。 然 后 ,如 果 删 除 ,就 按 Delete 键 ; 如 
果 剪 切 , 就 按 Ctrl 十 X 键 ; 如 果 复 制 ,就 按 Ctrl 十 C 键 。 

如 果菜 单 栏 被 复制 后 ,要 粘贴 到 其 他 网 页 ,那么 ,打开 目标 网 页 ,把 光标 定位 到 要 粘贴 的 
位 置 ,然后 按 Ctrl 十 V 键 就 可 以 了 。 粘 贴 之 后 ,切换 到 网 页 的 HTML 代码 视图 ,可 以 看 到 
在 过 body> 过 /body> 标 签 部 分 ,生成 对 应 的 菜单 栏 HTML 代码 ,并 且 在 二 head 一 /head 二 
标签 部 分 ,生成 如 下 代码 : 


< script src = "SpryAssets/SpryMenuBar. js" type = "text/javascript"></script > 

< link href = "SpryAssets/SpryMenuBarHorizontal. css" rel = "stylesheet" type = "text/css" /> 

这 段 代 码 第 一 行 的 含义 是 ,引入 当前 网 页 存储 目录 下 SpryAssets 子 文件 夹 中 的 
SpryMenuBar. js 文件 ; 第 二 行 的 含义 是 ,引入 当前 网 页 存储 目录 下 SpryAssets 子 文件 夹 中 
的 SpryMenuBarHorizontal. css 文件 。 引 入 这 两 个 文件 的 目的 是 生成 Spry 菜单 栏 的 功能 ， 
并 修饰 其 外 观 。 事 实 上 ,每 一 个 添加 了 Spry 控件 对 象 的 网 页 ,Dreamweaver 都 会 自动 在 其 
HTML 代码 中 添加 上 述 两 行 代码 。 


< 任务 10.1 


内 容 : 在 Dreamweaver 中 ,把 本 校 校园 网 站 主页 上 原先 设计 的 导航 栏 图 像 删除 ,添加 一 
个 Spry 菜单 栏 。 根 据 需求 分 析 报 告 ,添加 菜单 栏 的 文本 信息 ,修改 菜单 栏 的 外 观 ,并 设置 相 
关 链 接 。 


10.2 在 Fireworks 中 制作 多 层 导航 


在 Fireworks 中 ,提供 了 一 种 称 为 “行为 "的 功能 。 和 Dreamweaver 一 样 ,Fireworks 中 
的 行为 也 可 以 设置 网 页 上 的 一 些 特殊 页 面 效果 ,使 得 当 一 些 特定 的 事件 发 生 的 时 候 , 网 页 会 
出 现 特定 的 反应 。 


10.2.1 ”和 为 "面板 
在 Fireworks 中 ,选择 “窗口 ”>“ 行 为" 命令, 即 可 打开 “行为 "面板 ,如 图 10-12 所 示 ; 或 


CF 134 网 站 开发 基础 教程 


者 按 Shift 十 F3 键 ,也 可 以 打开 或 关闭 “行为 ”面板 。 

在 “行为 ”面板 中 , 单 击 “ 添 加 行为 ”按钮 吕 ,将 弹 
出 行为 的 选择 菜单 ; 选择 “行为 ”面板 上 的 某 个 已 经 添 
加 的 行为 ,再 单 击 * 删 除 行为 "按钮 之 或 “删除 动作 ” 按 
钮 团 ,就 可 以 把 行为 删除 。 > 

Fireworks 中 提供 的 主要 行为 有 简单 变换 图 像 、 交 
换 图 像 .恢复 交换 图 像 . 设 置 导航 栏 图 像 、 滑 过 导航 栏 、 
按 下 导航 栏 恢复 导航 栏 ,设置 弹出 菜单 .设置 状态 栏 文本 。 制 作 网 页 上 的 多 层 导 航 , 应 该 使 
用 其 中 的 “设置 弹出 菜单 ”行为 。 


10.2.2 设置 弹出 菜单 


图 10-12 ”Fireworks 中 的 行为 面板 


Fireworks 


A 在 使 用 “插入 行为 ”指令 之 前 ， 请 选择 一 个 切片 或 热点 。 


[CC 到 


10-13 未 选择 热点 或 切片 不 能 添加 行为 


一 般 情况 下 ,在 制作 好 网 页 界面 设计 图 并 画 好 切片 之 后 , 才 添 加 行为 。 添 加 “设置 弹出 
菜单 ”行为 的 操作 方法 如 下 。 

(1) 选择 一 个 热点 或 切片 ,然后 在 “行为 "面板 上 单 击 “ 添 加 行为 "按钮 员 ,选择 “设置 
弹出 菜单 ”, 这 时 将 弹出 一 个 “弹出 菜单 编辑 器 ”对 话 框 ,如 图 10-14 所 示 。 


图 10-14 ”Fireworks 中 的 弹出 菜单 编辑 器 
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(2) 选择 编辑 器 中 的 “内 容 ? 选 项 卡 , 单 击 “ 添 加 菜单 "按钮 十 ,添加 若干 个 菜单 项 ,并 在 
每 个 菜单 项 的 “文本 ”和 “ 超 链接 ” 栏 中 分 别 输入 菜单 项 的 名 称 和 超 链 接 目 标 对 象 , 在 “目标 ” 
栏 中 选择 目标 窗口 。 
(3) 选择 编辑 器 中 的 “外 观 ” 选 项 卡 ,设置 菜单 项 的 字体 和 大 小 以 及 在 弹 起 和 滑 过 状态 
下 文本 和 单元 格 的 颜色 ,如 图 10-15 所 示 。 该 页 的 设置 可 以 选择 两 种 类 型 : HTML 和 图 像 。 
如 果 选 择 图 像 ,可 以 为 单元 格 设置 更 多 的 样式 。 
学 出 荣 单 编辑 器 
| 内 容 | 外 观 | 高 级 位置 
单元 格 : 〇 NNLQD 。 加 图 你 加 ) | 委 直 荣 单 司 


和 ee uid mivetic sons-serit S| 

| BT|] 国 [二 | 必 

璋 起 状态 请 过 状 
x 加 单元 格 ， 


Eh 


[| 


图 10-15 设置 弹出 菜单 外 观 


(4) 设置 “高 级 "选项 卡 中 的 选项 。 除 了 边框 阴影 和 高 亮 中 颜色 的 设置 之 外 ,其 他 的 选 
项 一 般 都 是 保持 默认 值 。 

(5) 设置 “位 置 ?选项 卡 中 的 选项 ,如 图 10-16 所 示 。 其 菜单 位 置 
中 ,菜单 位 置 有 4 种 预 设 的 选择 ,每 个 选择 按钮 中 ,大 的 和 矩 国 回 回回 
形 块 代表 导航 栏 中 标题 的 位 置 , 蓝 色 的 小 长 条 代表 下 拉 菜 -0 Hm 
单 的 位 置 ,注意 不 要 弄 反 了 。 选 择 一 种 预 设 项 之 后 ,还 可 以 
修改 X 和 YY 的 值 ,对 菜单 的 位 置 进行 微调 。 

(6) 单 击 “ 完 成 "按钮 ,就 表示 弹出 菜单 设置 好 了 。 单 击 界面 图 的 编辑 窗口 , 按 F12 键 ， 
可 以 在 浏览 器 中 查看 网 页 中 下 拉 菜 单 的 效果 。 

如 果 要 修改 行为 ,首先 要 选择 添加 了 行为 的 切片 ,然后 打开 “行为 "面板 ,在 面板 中 选择 
已 经 添加 的 行为 ,双击 它 , 就 可 以 打开 行为 的 设置 窗口 进行 修改 。 

在 Fireworks 中 添加 好 行为 之 后 ,如 果 确 定 整个 界面 设计 图 制作 完成 ,就 可 以 跟 以 前 一 
样 导出 网 页 和 分 割 的 图 像 。 

【案例 演示 10-3】 在 Fireworks 中 制作 下 拉 菜 单 ,效果 如 图 10-17 所 示 。 

(1) 在 Fireworks 中 ,打开 网 页 设计 图 ,在 "学校 概 况 " 上 夯 出 一 个 切片 。 


图 10-16 设置 弹出 菜单 的 位 置 
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图 10-17 Fireworks 弹出 菜单 示例 


(2) 选择 刚 画 好 的 切片 ,然后 按 Shift 十 F3 键 ,打开 “行为 ”面板 , 单 击 “ 添 加 行为 按钮， 
选择 “设置 弹出 菜单 ”。 

(3) 在 “内 容 ” 选 项 卡 中 ,添加 3 个 菜单 项 ,文本 分 别 设置 为 学 校 简介 、 校 园 剪 影 、 机 构 
设置 , 超 链接 分 别 设置 为 这 几 个 栏目 对 应 的 子 页 名 字 , 目 标 都 选择 _blank, 如 图 10-18 
所 示 。 


四 日 关 目 日 


下 


图 10-18 示例 中 的 菜单 内 容 


(4) 在 “外 观 ? 选 项 卡 中 , “单元 格 类 型 ?选择 为 “图 像 ”字体 和 大 小 分 别 设置 为 宋体 
和 12, 弹 起 状态 文本 和 单元 格 颜色 分 别 为 #000000 和 并 FFFFFF., 滑 过 状态 文本 和 单元 格 
颜色 分 别 为 #FFFFFF 和 #4088FF。 样 式 选择 如 图 10-19 所 示 。 


[内 容 | 外观 | 高 级 [位置 | 


单元 格 : OHmLOD) 。 加 图 入 加 ) 生 直 菜单 加 | 
字体 四: 避 

大 小 @): 国 目 口 j 斩 目 

弹 起 状态 滑 过 状态 


E23 | 单元 格 : 让 单元 格 : 加 | 


图 10-19 示例 中 的 菜单 外 观 设置 


EE 


(5) 在 “高 级 ”选项 卡 中 ,保持 默认 设置 ,不 做 任何 修改 。 
(6) 在 “位 置 " 选 项 卡 中 ,选择 “将 菜单 位 置 设置 到 切片 的 底部 ”选项 。 
(7) 单 击 “ 完 成 ”按钮 ,然后 导出 网 页 ,浏览 网 页 查看 下 拉 菜 单 效果 。 
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10.3 制作 动态 按钮 


在 Fireworks 中 制作 完 下 拉 菜 单 ,并 导出 生成 网 页 之 后 ,可 以 在 Dreamweaver 中 对 网 
页 导航 栏 中 的 菜单 继续 进行 制作 。 在 这 里 ,要 制作 动态 的 按钮 ,效果 为 当 光 标 移 到 导航 栏 的 
菜单 项 上 面 时 ,菜单 项 会 呈现 出 特殊 的 外 观 效果 ,比如 浮 起 或 者 发 出 光 早 ,类似 于 
Fireworks 中 的 浮雕 滤 镜 或 光 晕 滤 镜 效果 ,不 过 ,这 个 是 在 Dreamweaver 中 完成 的 。 

要 制作 动态 按钮 ,需要 两 个 步骤 : 一 个 是 准备 好 两 张 按钮 图 片 , 男 一 个 是 应 用 “鼠标 经 
过 图 像 " 技 术 。 


10.3.1 制作 动态 按钮 图 像 


浮动 按钮 效果 需要 两 张 图 像 ,一 张 是 光标 没 经 过 时 的 按钮 ,一 张 是 光标 经 过 时 的 按钮 。 
两 张 图 像 必 须 一 样 大 小 ,浏览 时 肉眼 才 不 易 察觉 两 种 图 像 的 切换 ,动态 的 效果 才 会 显得 

整个 制作 过 程 概述 如 下 。 

首先 ,确定 要 添加 动态 按钮 的 网 页 ,在 Fireworks 中 打开 它 的 界面 设计 图 ,在 图 中 ,导航 
栏 上 的 每 一 个 标题 都 视 为 一 个 按钮 ; 其 次 ,给 界面 图 画 好 切片 (导航 栏 上 的 每 个 标题 都 画 一 
个 切片 ) ,导出 网 页 和 分 割 出 来 的 小 图 像 ,这样 ,就 得 到 了 每 个 标题 的 第 一 张 按钮 图 像 (在 网 
站 根 目录 的 图 像 文 件 夹 中 ); 然后 ,在 Fireworks 中 隐藏 切片 ,再 修改 每 个 标题 的 外 观 , 让 标 
题 看 上 去 有 一 些 变化 ,比如 使 用 滤 镜 制造 浮雕 .投影 、 发 光 的 效果 或 者 改变 文本 的 颜色 和 大 
小 等 属性 ,抑或 给 标题 添加 一 些 背 景色 ,接着 ,显示 切片 ,选择 标题 上 的 切片 ,导出 已 选 切片 
对 应 的 图 像 ,这 样 ,就 得 到 了 标题 的 第 二 张 按钮 图 像 。 

【案例 演示 10-4】 为 校园 网 站 主页 上 的 “学 校 
概况 "标题 制作 动态 按钮 ,准备 两 张 按钮 图 像 , 如 学 校 概况 | ”学 校 概 况 | 
图 10-20 所 示 。 

(1) 在 Fireworks 中 打开 主页 界面 图 , 画 好 切 
片 ,确保 导航 栏 上 每 个 标题 都 画 一 个 切片 ,然后 导出 网 页 和 图 像 , 得 到 “学 校 概况 ”标题 对 应 
的 第 一 张 按 钮 图 像 ,名 称 为 index2_r3_cl16. jpg。 如 果 本 步骤 在 之 前 已 经 完成 ,这 里 可 以 
跳 过 。 

(2) 在 Fireworks 中 ,修改 标题 的 外 观 。 单 击 编辑 窗口 左 侧 Web 工具 面板 上 的 “隐藏 
切片 和 热点 ”按钮 图 ,将 切片 隐藏 。 然 后 在 “学 校 概况 "文本 上 夯 一 个 和 矩形 , 宽 、 高 .颜色 、 
透明 度 分 布设 置 为 80、30、# CCCCCC、25, 并 调整 矩形 的 位 置 使 之 刚好 覆盖 住 “ 学 校 
概况 ”。 

(3) 单 击 Web 工具 面板 上 的 “显示 切片 和 热点 ”按钮 图 ,将 切片 重新 显示 出 来 。 然 后 
选择 “学 校 概况 ”文本 上 的 切片 ,再 选择 “文件 ”>“ 导 出 ”命令 ,把 已 选 切片 下 的 图 像 单独 导 
出 ,将 它 命名 为 index2_anniul. jpg, 导 出 设置 如 图 10-21 所 示 。 这 样 ,就 得 到 “学 校 概况 ” 标 
题 对 应 的 第 二 张 按 钮 图 像 。 


图 10-20 动态 按钮 图 像 示例 
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文件 名 四 : |index2_anninl jpe 习 
导出 : [加 司 [了 
mLo: 元 和 
切片 由; [导出 切片 ~ 
页 面 : [当前 页 面 可 
ET 当前 关 老 
[A 


图 10-21 导出 第 二 张 按钮 图 像 


10.3.2 鼠标 经 过 图 像 


鼠标 经 过 图 像 是 Dreamweaver 中 提供 的 一 种 图 像 对象 , 它 能 够 帮助 实现 动态 按钮 的 
效果 。 

使 用 鼠标 经 过 图 像 的 操作 过 程 概述 如 下 。 

首先 ,在 Dreamweaver 中 打开 要 添加 动态 按钮 的 网 页 ; 其 次 ,在 网 页 中 找到 要 设置 成 动 
态 按钮 的 标题 图 像 , 复 制 它 的 源 文件 属性 值 ,再 把 标题 图 像 删 除 ( 不 是 把 属性 值 删除 ); 然 
后 ,把 光标 定位 在 刚才 删除 掉 图 像 的 单元 格 中 , 单 击 Dreamweaver 的 “插入 ”菜单 , 选 “ 图 像 
对 象 " 中 的 “鼠标 经 过 图 像 " 菜 单项 ,弹出 图 10-22 所 示 的 对 话 框 ,把 刚才 复制 下 来 的 源 文件 
属性 值 粘贴 到 “原始 图 像 " 栏 中 ,再 单 击 “ 鼠 标 经 过 图 像 * 栏 右边 的 “浏览 "按钮 ,选择 为 动态 按 
钮 准备 的 第 二 张 图 像 ; 最 后 , 单 击 “ 确 定 ” 按 钮 ,完成 鼠标 经 过 图 像 的 添加 。 


新 入 鼠标 经 过 图 像 


加 agel20 


[linages/index2_r3_c16. jpe 


inages/index2_arniul. jpg 


回 预 吉 限 标 经 过 图 像 


图 10-22 “插入 鼠标 经 过 图 像 " 对 话 框 


在 图 10-22 中 ,“ 按 下 时 ,前 往 的 URL” 栏 用 来 设置 鼠标 经 过 图 像 的 超 链 接 对 象 ,如 果 该 
图 像 已 经 添加 了 下 拉 菜 单 ,那么 这 一 项 就 不 需要 设置 。 

不 过 ,如 果 要 修改 成 动态 按钮 的 菜单 项 ,在 Fireworks 中 已 经 添加 了 下 拉 菜 单 ,那么 , 直 
接 把 菜单 项 蔡 换 成 鼠标 经 过 图 像 , 肯 定 会 把 下 拉 菜 单 的 效果 删除 掉 。 为 了 保留 住 下 拉 菜 单 ， 
在 制作 鼠标 经 过 图 像 之 前 ,应 该 先 把 原 菜单 项 中 的 超 链接 信息 记录 下 来 ,等 添加 完 鼠 标 经 过 
图 像 之 后 ,再 把 相关 的 信息 恢复 。 

下 面 通过 一 个 案例 来 说 明 。 

【案例 演示 10-5】 修改 案例 演示 10-1 中 所 制作 的 校园 网 站 主页 ,把 导航 栏 上 的 “学 校 
概况 ”标题 修改 成 动态 按钮 ,并且 要 求 保留 下 拉 菜 单 , 如 图 10-23 所 示 。 
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10-23 ”修改 “学 校 概况 ”为 动态 按钮 


修改 步骤 如 下 。 

(1) 在 Dreamweaver 中 打开 要 添加 动态 按钮 的 网 页 。 然 后 ,在 网 页 中 选择 “学 校 概 况 ” 
标题 图 像 ,切换 到 网 页 的 代码 视图 ,把 图 像 标 签 前 面 的 超 链接 信息 记录 下 来 ,如 图 10-24 
所 示 。 


<a href="javascript:;" onmouseout= 
"MM menustartTimeout (1000);" onmouseover= 
"MM_menuShowMenu ( 'MMMenuContainer0119213350_0' 
'MMMenu0119213350_0',3,31,'index2 _r3 c16');"> 


图 10-24 “学 校 概况 ”的 弹出 菜单 代码 


(2) 回 到 网 页 的 设计 视图 ,仍然 选中 “学 校 概况 ”标题 图 像 ,复制 它 的 源 文件 属性 值 
images/index2_r3_cl16. jpg, 再 把 标题 图 像 删除 (不 是 把 属性 值 删除 )。 

(3) 把 光标 定位 在 刚才 删除 图 像 的 单元 格 中 , 单 击 Dreamweaver 的 “插入 ”一 “图 像 对 
象 "一 “鼠标 经 过 图 像 ” 命 令 , 在 “插入 鼠标 经 过 图 像 " 对 话 框 中 ,把 images/index2_r3_c16. jpg 粘 
贴 到 * 原 始 图 像 ” 栏 中 ,再 单 击 “ 鼠 标 经 过 图 像 ” 栏 右边 的 “浏览 ”按钮 ,选择 案例 演示 10-4 
中 制作 的 第 二 张 图 像 index2_anniul. jpg。 然 后 , 单 击 * 确 定 ” 按 钮 ,完成 鼠标 经 过 图 像 的 
添加 。 

(4) 选择 刚刚 添加 的 鼠标 经 过 图 像 , 再 次 切换 到 网 页 的 代码 视图 ,此 时 图 像 标签 前 面 的 
代码 如 图 10-25 所 示 ,对 它 进行 修改 ,把 图 10-24 中 的 “MM_menuStartTimeout(1000);” 添 
加 到 onmouseout 的 属性 值 中 ,把 “MM_menuShowMenu( 'MMMenuContainer0119213350_0'， 
'MMMenu0119213350_0',3,31, 'index2_r3_c16');” 添 加 到 onmouseover 的 属性 值 中 ,结果 
如 图 10-26 所 示 。 


<a href="#" onmouseout="MM swapImgRestore()" onmouseover= 
"MM_swapImage ('Image120','', 'images/index2_anniul.jpg',1)"> 


图 10-25 “学 校 概况 ”的 动态 效果 代码 


<a href="#" onmouseout= 
"MM menuSstartTimeout (1000) ;MM_swapImgRestore ()" onmouseover= 
"MM menuShowMenu('MMMenuContainer0119213350 0', 
'MMMenu0119213350_0',3,31,'index2 _r3 ci16') ;MM swapImage('Imagel120', 
'', "images/index2_ anniul .jpg',1)"> 


10-26 动态 效果 和 弹出 菜单 的 合并 代码 


1 
OOOOO@ meme 
(5) 保存 网 页 , 按 F12 键 浏览 ,查看 效果 。 
~ 任务 10.2 


内 容 : 

(1) 将 原来 的 校园 网 站 主页 界面 设计 图 在 Fireworks 中 打开 ,并 另存 为 一 个 新 的 图 像 
文件 ,比如 “主页 2. png”; 然后 ,在 新 的 图 像 文件 中 ,为 导航 栏 上 的 每 一 个 标题 设置 切片 ,并 
应 用 Fireworks 的 行为 ,在 需要 下 拉 菜 单 的 标题 上 添加 弹出 菜单 。 

(2) 根据 需求 分 析 报 告 , 制 作 财务 科 栏 目 对 应 的 网 页 ,其 中 的 二 级 子 页 一 一 “所 得 税 说 
明 ” 页 ,效果 如 图 10-27 所 示 ,保存 为 cwk_xia3. htm。 


图 10-27 “所 得 税 说 明 ” 页 


网 页 制作 : 特殊 链接 


其 己 洲 


本 章 将 介绍 一 些 特 殊 的 超 链 接 , 包 括 非 网 页 文件 链接 、 邮 件 链接 、 锚 记 链 接 和 友情 链接 ， 
并 介绍 它们 的 制作 方法 以 及 这 些 特 殊 链 接 在 网 站 中 的 作用 。 


本 章 学 习 要 点 : 

(1) 了 解 超 链接 的 目标 对 象 种 类 
(2) 了 解 文件 下 载 的 制作 方法 

(3) 了 解 锚 记 的 作用 

(4) 了 解 友 情 链接 的 作用 

(5) 掌握 非 网 页 文件 链接 的 制作 方法 
(6) 掌握 邮件 链接 的 制作 方法 

(7) 掌握 锚 记 的 使 用 方法 


前 面 介 绍 的 超 链接 所 链接 的 目标 对 象 都 是 网 页 ,而 在 实际 的 网 页 制作 过 程 中 ,不 仅仅 需 
要 链接 到 对 象 ,有 了 时候, 可 能 需要 链接 到 某 个 其 他 类 型 的 文件 或 者 某 个 网 址 、 网 页 中 的 某 个 
指定 位 置 。 根 据 目 标 对 象 的 不 同 ,可 以 将 超 链接 分 为 不 同类 型 ,比如 Word 文件 链接 、 可 执 
行文 件 链接 、 邮 件 链接 、 锚 记 链 接 等 。 

不 同类 型 的 链接 目标 对 象 ,将 以 不 同 的 形式 出 现 。 比 如 ,链接 的 目标 对 象 是 一 个 压缩 
包 , 那 么 单 击 超 链 接 的 时 候 将 弹出 一 个 下 载 或 保存 的 对 话 框 ; 如 果 目 标 对 象 是 一 个 邮件 地 
址 , 单 击 超 链接 的 时 候 将 弹出 一 个 发 送 邮件 的 窗口 。 

网 页 是 最 常见 的 一 种 链接 目标 对 象 ,而 其 他 类 型 的 超 链接 ,在 此 称 之 为 特殊 链接 。 


11.1 链接 到 非 网 页 文件 


文件 的 类 型 多 种 多 样 ,有 网 页 文件 .Office 文件 .图 像 文件 .压缩 包 文件 .音乐 文件 等 。 
如 果 超 链接 的 目标 对 象 是 非 网 页 类 型 的 文件 ,该 怎么 设置 呢 ? 事实 上 , 非 网 页 类 型 的 文件 作 
为 超 链接 的 目标 对 象 时 ,其 设置 方法 和 网 页 文件 是 一 样 的 。 首 先 ,选择 要 设置 链接 的 对 象 ; 
然后 ,在 属性 面板 上 找到 “链接 " 栏 ,通过 辐 图 标 或 | 合 图 标 来 选择 需要 的 非 网 页 类 型 文件 ， 
这 样 目标 对 象 设置 就 完成 了 。 

【案例 演示 11-1】 设置 校园 网 站 主页 导航 栏 中 的 “办 公 电 话 查询 "和 “ 校 历 ”两 个 链接 ， 
它们 的 目标 对 象 分 别 是 “办 公 电 话 . doc” 和 *“ 校 历 . xls”。 

(1) 打开 “我 的 电脑 ”资源 管理 器 ,进入 校园 网 站 根 目录 ,新 建 一 个 子 文件 夹 ,命名 为 “ 文 
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档 ”, 然 后 把 “办 公 电 话 . doc” 和 “ 校 历 . xls” 两 个 文件 复制 到 该 子 文件 夹 中 ,如 图 11-1 所 示 。 


;地址 四 ) | 回 E:\ 校 园 网 站 \ 文 档 


文件 和 文人 天 任 和 “用 了 各 办 二 xs 国 必 | 攻 ,epca 
= 二 |19 项 2918 


其 它 位 置 4 


图 11-1 把 链接 文件 存放 到 网 站 中 


(2) 运行 Dreamweaver, 打 开 index. htm 文件 ,选中 Spry 菜单 栏 ,在 属性 面板 中 选中 
“公共 服务 ”中 的 “办 公 电 话 查询 ”, 在 “链接 ” 栏 中 选择 目标 对 象 “ 文 档 办 公 电 话 . doc”, 并 设置 
目标 窗口 为 _blank, 如 图 11-2 所 示 。 


+- av 1+- PE a 


| 


攻 


11-2 设置 “办 公 电 话 "链接 


(3) 使 用 步骤 (2) 中 的 操作 方式 ,设置 “ 校 历 ”的 链接 为 “文档 校 历 . xls”, 并 设置 目标 窗 
口 为 _blank ,如 图 11-3 所 示 。 
< 十 

链接 广 稳 入 历 :is | 局 

标题 [ | 目标 [ax | 


4- Av +- -+ 
| 
| 


[i 
| 


图 11-3 设置 “ 校 历 " 链 接 


(4) 保存 网 页 , 按 F12 键 ,查看 超 链接 的 设置 效果 。 

浏览 本 例 中 的 主页 , 单 击 “ 办 公 电 话 查询 ”时 ,将 弹出 图 11-4 所 示 的 询问 框 。 如 果 单 击 
“打开 ”按钮 , 则 计算 机 将 使 用 浏览 器 窗口 打开 “办 公 电 话 . doc”; 如 果 单 击 “ 保 存 ” 按 钮 ,将 出 
现 “ 文 件 下 载 ” 对 话 框 (如 图 11-5 所 示 ) ,要求 选择 硬盘 上 的 一 个 位 置 ,用 来 保存 即将 下 载 的 
“办 公 电 话 . doc”。 单 击 “ 校 历 " 时 ,情况 也 是 一 样 的 。 


效 想 打开 或 保存 此 文件 吗 ? 


[i 名 称 : 办 公 电 话 doc 
类 型 :有 ierosoft Word 文档 , 19.0 如 
发 送 者 : 了:\ 校 园 网 站 \ 文 档 


L 环 wjL 晤 日 ] 性 殉 


回 打开 此 类 文件 之 前 总 是 询问 四) 


Ma 


语文 件 。 有 何 风险 ? 


图 11-4 “文件 下 载 " 对 话 框 
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正在 保存 : 
办 公 电 话 . doe 来 自 E:\ 校 园 网 站 \ 文 档 


[ 
估计 剩余 时 间 : 
下 载 到 : 


图 11-5 链接 到 非 网 页 文件 的 效果 


严格 来 说 ,不 同类 型 的 非 网 页 文件 ,在 作为 链接 目标 对 象 被 打开 时 ,使 用 的 方式 是 不 同 
的 ,常见 的 类 型 如 下 。 

(1) Word 文件 : 单 击 该 类 型 的 超 链接 时 ,将 询问 打开 还 是 保存 ,如 果 打开 ,将 使 用 浏览 
器 窗口 显示 文件 内 容 。 

(2) Excel 文件 : 单 击 该 类 型 的 超 链接 时 ,将 询问 打开 还 是 保存 ,如 果 打开 ,将 使 用 浏览 
器 窗口 显示 文件 内 容 。 

(3) 压缩 包 文件 : 单 击 该 类 型 的 超 链接 时 ,将 询问 打开 还 是 保存 ,如 果 打 开 , 将 使 用 压 
缩 工具 打开 压缩 包 的 内 容 。 

(4) 视频 文件 : 单 击 该 类 型 的 超 链接 时 ,将 询问 打开 还 是 保存 ,如 果 打开 ,将 使 用 视频 
播放 器 播放 视频 。 

(5) 音乐 文件 : 单 击 该 类 型 的 超 链接 时 ,将 询问 打开 还 是 保存 ,如 果 打 开 , 将 使 用 音乐 
播放 器 播放 音乐 。 

(6) 可 执行 文件 : 如 . exe 文件 。 单 击 该 类 型 的 超 链接 时 ,将 询问 运行 还 是 保存 ,如 果 运 
行 ,将 直接 运行 可 执行 文件 ,比如 进行 软件 安装 。 

男 外 ,Word 文件 可 以 被 转换 成 网 页 文件 ,转换 之 后 ,再 将 其 设置 为 链接 目标 对 象 ,此 时 
就 不 会 弹出 询问 框 ,而 是 直接 使 用 浏览 器 窗口 打开 Word 文件 的 内 容 。 将 Word 文件 转换 
为 网 页 文件 的 方法 是 : 打开 Word 文件 ,然后 单 击 “ 文 件 "菜单 中 的 “另存 为 "菜单 项 ,在 弹出 
的 对 话 框 中 选择 “保存 类 型 ”为 单个 网 页 ,保存 之 后 就 可 以 得 到 一 个 内 容 相 同 的 网 页 文件 。 
通过 这 种 方式 得 到 的 网 页 文件 ,其 扩展 名 是 . mht, 不 同 于 普通 的 网 页 文件 ,是 一 种 更 高 级 的 
网 页 文件 格式 。 


11.2 邮件 链接 


邮件 链接 一 般 用 在 制作 “联系 我 们 ”这 一 类 的 超 链接 上 。 并 不 是 所 有 的 网 站 都 有 像 “ 联 
系 我 们 ”或 “联系 管理 员 ” 之 类 的 字眼 ,有 些 网 站 提供 这 样 的 超 链接 ,是 为 了 给 用 户 提供 一 个 
途径 ,可 以 对 网 站 使 用 方 提 建 议 或 意见 。 收 集 用 户 的 建议 或 意见 ,有 助 于 网 站 使 用 方 的 发 
展 。 有 些 网 站 也 可 能 使 用 留言 板 的 方式 来 收集 这 方面 的 信息 ,但 是 如 果 想 使 用 一 种 更 简便 、 
更 隐藏 的 收集 方式 , 则 在 网 站 上 提供 像 * 联 系 我 们 ”这样 的 邮件 链接 也 是 一 种 不 错 的 选择 。 

制作 邮件 链接 的 方法 : 首先 ,选择 网 页 上 要 设置 链接 的 对 象 ,比如 “联系 我 们 ”4 个 
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字 ; 然后 ,在 属性 面板 上 找到 “链接 " 栏 , 输 入 “mailto: 邮件 地 址 ”, 这 样 邮件 链接 就 设置 完 
成 了 。 

注意 : mailto 后 面 的 冒号 ,必须 是 英文 输入 法 状态 下 输入 的 冒号 ,不 能 是 中 文 的 ,否则 
邮件 链接 将 不 起 作用 。 

【案例 演示 11-2】 在 校园 网 站 主页 导航 中 添加 “联系 我 们 ”, 并 设置 超 链接 。 

(1) 运行 Dreamweaver, 打 开 index. htm, 选 中 Spry 菜单 栏 ,选择 “公共 服务 ”, 添 加 “ 联 
系 我 们 ”, 如 图 11-6 所 示 。 


= | 
记 链接 中 国人 = 
; [| 旧 标 | | 
新 中 心 


11-6 添加 “联系 我 们 ” 


(2) 选择 “联系 我 们 ”, 在 “链接 ” 栏 输入 mailto:sandy260@163. com, 如 图 11-7 所 示 , 按 
Enter 键 确定 。 


图 11-7 设置 邮件 链接 


(3) 保存 网 页 , 按 F12 键 浏览 网 页 ,查看 效果 。 当 用 户 单 击 “ 联 系 我 们 ”时 ,将 看 到 如 
图 11-8 所 示 的 “新 邮件 "窗口 ,在 文本 区 域 输入 邮件 内 容 , 单 击发 送 ” 按 钮 ,就 可 以 将 文件 发 
送 给 sandy260@163. com 这 个 邮箱 。 


图 11-8 邮件 链接 单 击 效果 


如 果 用 户 单 击 邮件 链接 时 ,没有 出 现 图 11-8 所 示 的 窗口 , 则 说 明 计 算 机 没有 安装 
Outlook 这 一 类 发 送 邮件 的 软件 或 者 是 安装 了 之 后 还 没有 设置 邮件 发 送 和 接收 的 邮箱 地 址 
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信息 。 如 果 原 因 属 于 后 者 ,那么 将 看 到 弹出 图 11-9 所 示 的 对 话 框 , 只 要 按照 提示 一 步 步 设 
置 就 可 以 了 。 


Internet 连接 向 导 


FEES ， 修 的 姓名 将 出 现在 外 发 邮件 的 “发 件 人 ”字段 ,键入 您 


显示 名 四 ) [am ] 
例如 : John Snith 


图 11-9 初次 运行 Outlook 的 提示 


< 任务 11.1 


内 容 : 

(1) 完善 校园 网 站 主页 的 导航 栏 , 设 置 非 网 页 类 型 的 文件 链接 和 邮件 链接 ,包括 “办 公 
电话 查询 ”“ 校 历 " 和 “联系 我 们 ”。 

(2) 完善 各 个 系 部 的 “文件 下 载 " 页 面 ,制作 其 中 的 文件 标题 链接 。 


11.3 命名 锚 记 


命名 锚 记 指 的 是 网 页 制作 者 在 网 页 文档 中 设置 的 一 种 标记 ,这 些 标记 通常 放 在 文档 的 
特定 主题 处 或 项 部 ,并 且 每 个 标记 都 有 一 个 名 称 。 设 置 了 标记 之 后 ,可 以 设置 到 这 些 标记 的 
超 链接 ,以 便 网 页 浏览 者 可 以 快速 地 找到 指定 的 位 置 。 


11.3.1 添加 命名 锚 记 


在 Dreamweaver 中 ,打开 “插入 "面板 ,选择 “常用 ”类 型 ,可 以 看 到 “命名 锚 记 ”, 如 图 11-10 
的 所 示 。 
当 要 添加 命名 锚 记 的 时 候 , 只 要 在 Dreamweaver 中 打开 网 页 ,把 光标 定位 在 要 添加 错 
记 的 位 置 , 然后 单 击 “插入 ?面板 中 的 “命名 锚 记 ”, 就 会 弹出 “命名 锚 记 ”对 话 框 , 如 
图 11-11 所 示 , 要 求 输入 锚 记 名 称 。 输 入 名 称 后 单 击 “ 确 定 ” 按 钮 ,在 网 页 上 就 会 看 到 一 个 
戎 标 志 , 它 就 是 刚刚 添加 的 命名 锚 记 。 
| 
御用 
超级 甸 按 全 
电子 闻 件 涟 近 了 
命名 钳 记 
水 平 如 
表格 加 


加 嘱 卫 | 加 搬 


图 11-10 “命名 错 记 "在 “插入 ”面板 中 图 11-11 添加 命名 锚 记 的 对 话 框 
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如 果 看 不 到 串 标志 ,可 以 通过 设置 Dreamweaver 的 首选 参数 ,使 其 显示 出 来 。 在 
Dreamweaver 中 选择 “编辑 ”一 “首选 参数 ”命令 ,选择 “不 可 见 元 素 ” 中 的 “命名 锚 记 ” 复 选 
框 ,如 图 11-12 所 示 , 这 样 在 网 页 中 就 可 以 看 到 锚 记 的 标志 了 。 


不 可 见 元 素 


显示 : 转 回 命名 镍 记 
忌口 
习 口 i 笠 
强 口 执行 符 
习 口 客 户 请 图 你 地 图 
习 回 赔 入 样式 
一 加 表单 隐 亲 区 域 
强 回 表单 范围 
图 口 ie 元 束 的 外 点 
本 口 对 入 元 索 独 记 
图 回 可 视 化 服务 器 标 答 (SP，CPIL，.) 
习 口 丰 可 视 化 服务 器 标签 (AsP,，CFNL，...) 
园 口 css 显示 :无 

显示 动态 文本 于 : | {Recordset_Field} ~ 
服务 器 六 包括: 加 显示 所 包 合 文件 的 内 容 


图 11-12 设置 锚 记 标志 为 可 见 


命名 锚 记 一 般 被 添加 到 网 页 中 某 个 标题 的 位 置 , 在 下 面 的 章节 中 ,将 通过 案例 演示 来 说 
明 它 的 作用 。 

添加 了 命名 锚 记 之 后 ,随时 可 以 修改 锚 记 的 名 称 ,只 需要 单 击 网 页 上 的 锚 记 标志 ,把 它 
选中 ,在 属性 面板 上 就 会 出 现 命名 锚 记 的 “名 称 ” 栏 ,如 图 11-13 所 示 , 可 以 在 栏 中 随时 进行 
修改 。 


闪 ， 生 名 辖 记 名 称 [moj1 ] 
~ 


11-13 ”修改 锚 记 的 名 称 


11.3.2 到 锚 记 的 超 链接 


在 网 页 上 添加 了 命名 锚 记 之 后 ,一 般 都 会 设置 到 该 锚 记 的 超 链 接 , 和 否则 添加 锚 记 就 没有 
意义 了 。 添 加 到 锚 记 的 超 链接 ,步骤 如 下 。 
首先 ,选中 要 设置 超 链接 的 文字 ; 然后 ,在 属性 面板 上 的 “链接 ” 栏 中 ,输入 " 井 锚 记名 
称 ”, 如 图 11-14 所 示 。 按 Enter 键 表示 确定 ,这 样 到 锚 记 的 超 链接 就 设置 完成 。 
格式 四) | 段落 国生 | 无 
回民 辐 链接 UD) | 和 sojil 
11-14 设置 链接 到 锚 记 
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【案例 演示 11-3】 对 cwk_xia3 进行 编辑 ,在 其 导航 栏 上 使 用 命名 锚 记 。 

(1) 运行 Dreamweaver, 打 开 cwk_xia3. htm, 打 开 “ 插 入 ”面板 ,选择 常用 类 工具 。 

(2) 把 光标 定位 在 网 页 的 “一 、 什 么 是 工资 、 薪 
金 所 得 ”前 面 , 单 击 “插入 ?面板 上 的 “命名 锚 记 ”， 任职 或 受 诬 而 取得 的 工交 
输入 锚 记 名 称 为 mj1, 单 击 “ 确 定 ” 按 钮 后 ,在 网 页 
上 就 插入 了 一 个 锚 记 ,如 图 11-15 所 示 。 

(3) 使 用 和 步骤 (2) 同 样 的 方法 ,在 网 页 的 “二 、 税 率 表 ”和 * 三 .应 纳税 额 计算 公 式 ” 前 分 
别 插入 锚 记 ,命名 为 mj2 和 mj3 ,效果 如 图 11-16 所 示 。 

(4) 选择 网 页 顶部 标题 行 中 的 “什么 是 工资 .薪金 所 得 ,在 属性 面板 上 找到 “链接 ” 栏 ， 
输入 # mjl, 如 图 11-17 所 示 。 


11-15 在 cwk_xia3. htm 中 插入 锚 记 1 


LE VoD 


图 11-16 在 cwk_xia3. htm 中 插入 图 11-17 设置 到 第 一 个 锚 记 的 链接 
锚 记 2 和 3 


(5) 使 用 和 步骤 (4) 同 样 的 方法 ,为 网 页 顶部 标题 行 中 的 “税率 表 ” 和 ”应 纳税 额 计算 公 
式 ” 分 别 设置 链接 为 #mj2 和 #mj3, 效 果 如 图 11-18 所 示 。 


图 11-18 在 网 页 顶部 添加 锚 记 


(6) 保存 网 页 , 按 Fl12 键 ,浏览 网 页 。 单 击 网 页 上 的 “什么 是 工资 薪金 所 得 ”"“ 税 率 表 ” 
和 “应 纳税 额 计算 公式 ”, 将 分 别 跳 转 到 网 页 中 的 “一 、 什 么 是 工资 薪金 所 得 ”“ 二 ,税率 表 ” 
和 “三 、 应 纳税 额 计算 公式 ”前面 。 

(7) 回 到 Dreamweaver 中 ,继续 对 网 页 cwk_xia3. htm 进行 编辑 。 在 网 页 顶部 标题 行 
前 面 添加 一 个 锚 记 ,命名 为 top。 

(8) 在 “一 、 什 么 是 工资 .薪金 所 得 "“ 二 、 税 率 表 ” 和 * 三 、 应 纳税 额 计 算 公 式 ” 后 面 分 别 
添加 “返回 顶部 标题 ”", 并 为 它们 分 别 设置 链接 为 # top, 如 图 11-19 所 示 。 


链接 加 ztep Bk: 


11-19 设置 到 顶部 锚 记 的 链接 


(9) 保存 网 页 , 按 F12 键 ,浏览 网 页 。 单 击 网 页 上 的 3 个 “返回 顶部 标题 ”, 都 会 跳 转 到 
网 页 中 的 “什么 是 工资 薪金 所 得 ”“ 税 率 表 ”和 “应 纳税 额 计算 公式 ”所 在 那 一 行 。 
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11.4 友情 链接 


友情 链接 也 是 一 种 特殊 的 链接 , 它 的 形式 一 般 是 在 自己 的 网 站 上 放置 某 些 网 站 的 
LOGO 图 片 或 文字 的 网 站 名 称 , 并 设置 对 应 网 站 的 网 站 作为 超 链接 的 目标 对 象 , 单 击 后 ,将 
弹出 对 应 网 站 的 主页 。 最 初 的 友情 链接 是 一 种 互惠 的 网 站 推广 手段 ,比如 在 A 网 站 上 添加 
到 B 网 站 的 链接 ,B 网 站 上 也 添加 到 A 网 站 的 链接 ,使 得 用 户 可 以 从 合作 网 站 中 发 现 自己 
的 网 站 ,达到 互相 推广 的 目的 。 

但 是 ,现在 也 有 一 些 单位 网 站 ,为 了 增加 自己 网 站 上 展示 的 资源 信息 ,就 只 是 单方 面 地 
添加 某 些 知 名 网 站 的 超 链接 ,使 得 用 户 在 浏览 自己 网 站 的 时 候 ,也 可 以 跳 转 到 其 他 相关 的 网 
站 上 。 一 般 这 种 形式 的 友情 链接 ,都 是 链接 到 和 性 质 相同 或 有 业务 关联 的 网 站 上 。 

设置 友情 链接 的 超 链接 目标 对 象 ,只 需要 在 属性 面板 上 的 “链接 ” 栏 输入 目标 网 址 就 可 
以 了 。 

【案例 演示 11-4】 在 校园 网 站 主页 上 添加 友情 链接 。 

(1) 运行 Dreamweaver, 打 开 index. htm, 找 到 友 
情 链接 板块 ,选择 对 应 单元 格 中 的 图 像 ,把 图 像 设 置 为 
单元 格 背 景 ,然后 在 单元 格 中 添加 丹 套 表格 ,并 在 其 中 
添加 “中 国教 育 信 息 网 ”和 “中 国教 育 在 线 ”, 如 图 11-20 
所 示 。 

(2) 选中 “中 国教 育 信息 网 ”, 在 属性 面板 上 找到 11-20 添加 友情 链接 的 内 容 
“链接 ”, 在 “链接 ” 栏 中 输入 http://www. chinaedu. 
edu. cn/ , 按 Enter 键 确定 ,并 设置 目标 为 _blank, 如 图 11-21 所 示 。 

本 3 


| frr sin aey 同 司 加 加 习 


图 11-21 设置 第 一 个 友情 链接 


(3) 选中 “中 国教 育 在 线 ”, 在 属性 面板 上 找到 “链接 ”, 在“ 链接” 栏 中 输入 http:// 
www. eol. cn/ , 按 Enter 键 确定 ,并 设置 目标 为 _blank, 如 图 11-22 所 示 。 


/rm ol ay v9D 姓 @ IE vl 


图 11-22 设置 第 二 个 友情 链接 


(4) 保存 网 页 , 按 F12 键 ,浏览 网 页 。 单 击 “ 中 国教 育 信息 网 ”或 “中 国教 育 在 线 ”, 将 分 
别 在 新 的 浏览 器 窗口 打开 对 应 的 网 站 主页 。 

(5) 在 Dreamweaver 中 对 友情 链接 中 的 两 个 网 站 链接 ,设置 CSS 样式 修饰 其 外 观 , 效 
果 如 图 11-23 所 示 。 
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用 户 登 录 文件 中 编辑 加 ”查看 D 收 训 有 工具 中 帮助 
LO © :a Pm wm 
密码 : AT ; 地 址 四 ) | 蜀 http: /mw chinaedu edu ca/ 局 贺 # 到 : 放 反 


加 
| 登录 杠 卫 下 今天 是 : 2012 年 2 月 6 日 星期 一 王 搬 年 正月 + 王 ， 


中 国教 育 信息 网 虽 


CHINA EDUCATION 


! 首 页 ! 教育 部 } 教育 新 闻 } 高校 招生 上 研 : 

上 教育 考试 } 教育 技术 ， 教师 招聘 } 基础 教 
AR bi 4 Es 
上 | 国 | 
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图 11-23 ”友情 链接 的 单 击 效果 
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内 容 : 

(1) 完善 自己 负责 的 校园 网 站 中 的 cwk_xia3. htm, 并 完成 主页 上 的 友情 链接 。 

(2) 根据 需求 分 析 报 告 , 制 作 “ 学 生 处 "和 "教务 处 ”两 个 栏目 对 应 的 网 页 ,注意 要 使 用 框 
架 集 。 
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网 页 制作 : 表单 


本 章 介绍 表单 的 应 用 ,包括 表单 和 各 个 常见 表单 对 象 的 作用 和 添加 方法 ,并 使 用 表单 制 
作用 户 登 录 界 面 。 另 外 ,对 表单 和 常用 表单 对 象 的 HTML 标签 及 属性 也 进行 简单 的 介绍 。 

本 章 学 习 要 点 : 

(1) 了 解 表单 和 表单 对 象 的 作用 

(2) 了 解 表单 的 属性 

(3) 了 解 表 单 对 象 的 属性 

(4) 了 解 关 于 表单 及 常见 表单 对 象 的 HTML 知识 

(5) 掌握 表单 的 使 用 

(6) 掌握 常见 表单 对 象 的 使 用 

在 校园 网 站 的 主页 上 ,需要 一 个 用 户 登录 界面 ,这 需要 使 用 表单 和 表单 对 象 ,所 以 接 下 
来 就 要 为 大 家 介绍 一 些 跟 表 单 相 关 的 基础 知识 。 


12.1 表单 和 表单 对 象 


12.1.1 表单 的 作用 


表单 是 网 页 中 一 种 重要 的 对 象 ,主要 用 于 收集 用 户 的 信息 ,比如 用 户 输入 的 姓名 、ID、 
密码 ,E-mail 地 址 、 留 言 等 。 它 看 上 去 像 一 张 需 要 填写 的 表格 或 单据 ,在 浏览 网 页 的 时 候 ， 
人 们 时 常 能 见 到 它 : 注册 表 、 登 录 框 、 留 言 板 、 网 上 调查 表 等 ,HTML 网 页 上 能 够 输入 数 
据 或 进行 选择 的 部 分 几乎 都 使 用 了 表单 。 图 12-1 就 是 使 用 表单 制作 的 一 个 用 户 登录 
界面 。 


帐号 | | @163.com 


码 不 记 密 码 了 ? 


暴 


版 本 默认 ~ 


两 周 内 自动 登录 2 回 SSI 安 全 登录 


登录 注册 


图 12-1 用 户 登 录 界 面 示例 
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用 户 在 表单 中 输入 数据 并 确定 之 后 ,数据 会 被 网 页 发 送 给 Web 服务 器 ,服务 器 再 根据 
网 页 中 发 送 过 来 的 一 些 命令 ,对 数据 进行 处 理 。 比 如 在 登录 界面 中 ,用 户 输入 了 账号 和 密码 
之 后 单 击 “登录 "按钮 ,账号 和 密码 就 会 被 当前 这 个 网 页 发 送 给 当前 网 站 所 在 的 Web 服务 
器 ,同时 发 送 给 服务 器 的 还 有 一 些 “ 如 何 处 理 数据 ”的 命令 ,服务 将 遵照 这 些 命 令 检索 用 户 的 
注册 信息 、 检 查账 号 和 密码 是 否 正确 ,以 决定 用 户 在 网 页 上 的 下 一 步 操作 。 

可 见 , 有 了 表单 ,网 页 可 以 跟 用 户 进行 互动", 从 而 实现 网 页 与 人 之 间 的 交互 功能 ,这 就 
是 表单 最 大 的 作用 。 


12.1.2 常见 表单 对 象 


一 个 完整 的 表单 应 该 是 由 表单 框架 .表单 对 象 和 表单 动作 组 成 的 。 什 么 是 表单 对 象 呢 ? 
表单 对 象 指 的 是 表单 中 的 各 种 组 件 , 包 括 标签 ,文本 框 复 选 框 . 单 选 按钮 列表 ,菜单 .按钮 
等 。 比 如 图 12-1 的 表单 中 ,就 包含 了 标签 ,文本 框 、 菜 单 、 复 选 框 、 按 钮 这 几 个 组 件 。 

在 Dreamweaver 中 ,提供 了 添加 表单 及 表单 对 象 的 工具 面板 。 在 “插入 "面板 中 ,选择 
“表单 "类 型 ,就 可 以 看 到 所 有 的 表单 对 象 ,如 图 12-2 所 示 。 

常见 的 表单 对 象 及 其 作用 如 下 。 

1. 标签 

标签 对 应 的 工具 图 标 是 苔 j , 它 主要 用 于 显示 表单 中 的 文本 ,一 般 跟 其 他 表单 对 象 一 起 
被 添加 。 

2. 文本 字段 

文本 字段 对 应 的 工具 图 标 是 匹 ] , 它 可 以 制作 一 个 单行 文本 框 ,能 够 让 用 户 输入 简单 的 
信息 或 输入 密码 ,如 图 12-3 所 示 。 有 时 候 也 可 以 把 文本 字段 设置 成 多 行 , 类 似 于 文本 区 域 。 


单 法 近 纪 am 
间接 记 组 遂 


加 FT ] 


图 12-2 表单 对 象 列表 图 12-3 文本 字段 应 用 


3. 隐藏 域 

隐藏 域 对 应 的 工具 图 标 是 辆 , 它 是 网 页 上 的 隐形 对 象 , 用 于 存储 一 些 重要 的 信息 ,并 
将 这 些 信息 隐藏 在 网 页 中 。 

4. 文本 区 域 

文本 区 域 对 应 的 工具 图 标 是 园 . 它 用 于 制作 多 行文 本 框 ,能 够 让 用 户 输入 大 段 的 数据 ， 
比如 留言 或 发 表 文章 ,如 图 12-4 所 示 。 
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诗歌 的 表现 手法 很 多 ， 我 国 景 日 流行 而 至 今 仍 常 使 用 的 传 “| 
统 表现 手法 有 “ 贼 、 比 、 兴 ”。 《+ 毛 诗 序 }》 说 ;， “ 故 诗 有 
Se TT 二 日 贼 ， 三 日 比 ， 四 日 兴 ， 五 日 雅 , 六 
日 颍 。” 


12-4 文本 区 域 应 用 


5. 复 选 框 

复 选 框 对 应 的 工具 图 标 是 中 , 它 用 来 提供 一 个 选项 ,一 组 复 选 框 中 可 以 同时 选中 多 个 ， 
如 图 12-5 所 示 。 

6. 单 选 按钮 

单 选 按 钮 对 应 的 工具 图 标 是 [加 , 它 用 来 提供 一 个 选项 ,一 组 单 选 按钮 中 只 能 同时 选中 
一 个 ,如 图 12-6 所 示 。 


回 两 周 内 自动 登录 回 SSI 冯 芝 基 泣 〇 另 日 而 
图 12-5 复 选 框 应 用 图 12-6 单 选 按钮 应 用 

7. 列表 /菜单 

列表 /菜单 对 应 的 工具 图 标 是 园 , 它 用 来 制作 一 个 列表 或 下 拉 菜单 ,可 以 显示 多 个 先 
项 ,如 图 12-7 所 示 。 

8. 跳 转 菜单 EJ 

跳 转 荣 单 对 应 的 工具 图 标 是 团 , 它 用 来 制作 一 个 下 拉 菜 单 , 可 。 | 加 
以 显示 多 个 选项 。 它 的 外 观 跟 菜单 一 样 , 但 是 功能 却 不 完全 相同 ，。 | 二 


选中 跳 转 菜单 中 的 某 个 选项 之 后 ,可 以 跳 转 到 某 个 目标 网 页 ,而 普 ”图 12-7 跳 转 菜单 应 用 
通 菜 单 没有 跳 转 功 能 。 
9. 文件 域 
文件 域 对 应 的 工具 图 标 是 加 , 它 在 网 页 上 提供 一 个 文件 浏览 框 ,如 图 12-8 所 示 , 可 以 
让 用 户 选择 需要 的 文件 ,以 便 上 传 给 Web 服务 器 。 
请 选择 要 上 传 的 图 像 [ER | 
图 12-8 文件 域 应 用 


10. 按钮 
按钮 对 应 的 工具 图 标 是 口 ] , 它 在 网 页 上 提供 确认 或 取消 等 功能 ,如 图 12-9 所 示 。 


本 本 罗 加 加 四 
12-9 ”按钮 应 用 


12.2 使 用 表单 


12.2.1 添加 表单 

1. 添加 表单 

在 * 插 人 ?面板 中 ,选择 表单 类 型 ,找到 “表单 "图 标 回 , 单 击 它 后 就 在 网 页 中 插入 一 个 表 
单 。 严 格 地 说 ,这 是 一 个 空 表 单 , 在 此 暂且 把 它 叫 做 “表单 框架 ”, 它 在 网 页 中 的 外 观 就 是 一 
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个 红色 的 虚线 框 。 


表单 对 象 放置 在 一 个 表单 框架 中 就 形成 了 多 个 表单 ， 
这 些 表单 对 象 的 信息 就 不 能 被 一 次 性 发 送 给 Web 服 。 声名 
务 器 。 所 以 说 ,一 个 表单 必须 要 有 一 个 表单 框架 ,也 尼 瑟 ] 


只 需要 一 个 表单 框架 。 EI 
图 12-10 中 ,第 一 张 图 显示 的 是 正确 的 表单 添加 
情况 ,第 二 张 和 第 三 张 显示 的 都 是 错误 的 。 FS 


2. 表单 的 属性 

在 HTML 中 ,表单 的 标签 是 一 form> 一 /formm>。 上 
在 Dreamweaver 的 网 页 编辑 窗口 中 , 单 击 表单 的 内 
部 ,在 编辑 窗口 下 方 的 标签 栏 中 就 会 出 现 一 form> 标 
签 ,如 二 form#froml。 单 击 标签 栏 中 的 <form 放 ,这 时 网 页 中 的 表单 就 被 选中 。 如 果 网 
页 中 的 编辑 焦点 不 在 表单 上 ,标签 栏 中 是 找 不 到 二 form 二 标签 的 ,所 以 在 此 之 前 单 击 网 页 
中 的 表单 ,是 为 了 让 编辑 焦点 转移 到 表单 上 。 

选中 表单 之 后 ,属性 面板 上 出 现 表单 的 属性 ,如 图 12-11 所 示 。 


[一 ] 世间 | 
图 12-10 表单 应 用 的 正确 与 错误 举例 


表单 全 动作 六 = 了 
|fornl | 乃 法 msr | 编码 类 型 > 


图 12-11 表单 属性 面板 


表单 的 主要 属性 有 表单 ID 动作、 目标 方法 和 编码 类 型 。 下 面 分 别 对 它们 的 作用 进行 
简单 的 解释 。 

(1) 表单 ID 

表单 ID 可 以 看 做 是 表单 的 身份 证 号 ,每 个 表单 的 ID 都 不 能 相同 ,一 个 ID 代表 一 个 表 
单 。 在 动态 网 站 的 编程 中 ,可 以 通过 引用 表单 ID 来 对 表单 进行 控制 。 在 本 书 介绍 的 静态 网 
站 技术 中 ,表单 ID 暂时 没有 派 上 用 场 。 

在 表单 ID 下 面 的 输入 框 中 ,可 以 直接 输入 来 设置 ID。 

(2) 动作 

在 每 个 表单 中 ,一 般 都 有 提交 表单 的 按钮 ,比如 “确定 ”“ 注 册 ”“ 登 录 ” 等 ,这 些 按钮 都 
是 用 来 提交 表单 信息 给 Web 服务 器 的 。 收 到 这 些 信 息 数据 之 后 ,服务 器 该 如 何 处 理 它们 
呢 ? 服务 器 需要 表单 给 它 一 些 相关 的 命令 。 这 些 命令 通常 是 一 些 具有 “动态 功能 ”的 程序 ， 
被 写 在 网 页 文档 中 ,比如 写 在 跟 表单 同一 个 网 页 中 或 者 写 在 其 他 网 页 中 。 

“动作 ”属性 就 是 用 来 告诉 服务 器 这 些 命令 在 哪个 文件 中 。 在 “动作 ” 栏 的 右 侧 ,有 一 个 
文件 夹 图 标 , 单 击 它 可 以 打开 “选择 文件 ”对 话 框 ,选择 表单 处 理 命令 所 在 的 文件 , 单 击 “ 确 
定 ” 按 钮 即 可 。 

(3) 目标 

这 里 的 “目标 ” 跟 超 链 接 的 目标 属性 作用 类 似 ,都 是 用 来 设置 新 打开 的 网 页 要 在 哪个 浏 
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览 器 窗口 显示 。 当 表单 被 提交 之 后 ,服务 器 奉命 打开 “动作 ”中 指定 的 网 页 文件 ,这 个 网 页 可 
能 需要 一 个 浏览 器 窗口 来 显示 执行 结果 ,“ 目 标 ” 属 性 就 是 为 它 设置 这 个 窗口 。 

(4) 方法 

表单 的 方法 有 两 个 可 选 值 : POST 和 GET。 当 表单 信息 被 提交 给 Web 服务 器 时 ,可 以 
选择 不 同 的 发 送 形式 ,表单 的 方法 就 是 用 来 设置 表单 信息 的 发 送 形 式 。POST 和 GET 这 两 
种 发 送 形式 的 区 别 在 此 不 展开 讨论 ,因为 这 不 属于 静态 网 站 技术 的 范畴 。 

(5) 编码 类 型 

编码 类 型 也 有 两 个 可 选 值 : application/x-www-form-urlencoded 和 maultipart/form- 
data。 它 们 用 来 指定 表单 信息 被 发 送 时 ,里 面 的 数据 应 该 使 用 什么 样 的 形式 来 表示 。 该 属 
性 与 “方法 ”属性 有 一 定 的 关联 性 ,本 书 不 展开 讨论 。 

在 制作 静态 网 站 的 过 程 中 ,因为 没有 涉及 动态 的 功能 ,所 以 基本 上 不 需要 关心 表单 属性 
的 设置 。 在 此 只 是 作为 一 个 扩展 的 知识 点 进行 介绍 。 


12.2.2 添加 表单 对 象 


添加 完 表单 框架 之 后 ,就 可 以 添加 表单 对 象 了 。 单 击 “ 插 入 ”面板 上 某 个 表单 对 象 按钮 ， 
就 能 添加 相应 的 对 象 。 

1. 添加 文本 字段 

单 击 “ 插 入 "面板 上 的 下 图 标 , 就 在 网 页 中 添加 一 个 文本 字段 。 如 果 是 第 一 次 添加 表 
单 对 象 , 会 弹出 图 12-12 所 示 的 “输入 标签 辅助 功能 属性 "对话 框 ,主要 用 来 设置 表单 对 象 的 
ID 和 标签 。 如 果 单 击 “确定 ”按钮 ,会 给 对 象 设 定 一 个 ID, 然 后 在 网 页 上 添加 该 对 象 ,并 且 
在 对 象 的 前 面 或 者 后 面 显 示 标签 内 容 ; 如 果 单 击 " 取 消 "按钮 ,ID 和 标签 都 不 会 生效 ,只 会 在 
网 页 上 添加 一 个 表单 对 象 ; 如 果 单 击 右上 角 的 “关闭 ”按钮 , 则 不 会 添加 任何 对 象 在 网 页 上 。 


输入 标签 辅助 功能 属性 


= 
标签 ， 周 户 名 :一 


。 便 用 “for“ 属 性 附加 标签 标记 
样式，O 〇 ”用 标签 标记 环绕 
〇 无 标签 标记 


位 置 ，@ 在 表单 项 前 
〇 在 表单 项 后 
访问 键 :| 。 | Tab 键 索 引 : | | 


加 果 在 插入 对 象 时 不 想 输 入 此 信息 ， 请 更 改 “ 捕 
助 功能 首选 专攻 。 


图 12-12 ”添加 文本 字段 
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如 果 在 添加 任何 表单 对 象 的 时 候 ,都 不 希望 出 现 这 个 


在 插入 时 显示 辅助 功能 属性 : 


对 话 框 ,可 以 单 击 Dreamweaver 的 “编辑 "菜单 ,选择 “首先 加 表单 对 象 四 ) 
参数 "菜单 项 ,在 弹出 的 如 图 12-13 所 示 对 话 框 中 选择 分 类 上 
为 “辅助 功能 ”, 然 后 取消 选择 “表单 对 象 " 复 选 框 , 单 击 “ 确 国 价 中 


定 ” 按 钮 就 可 以 了 。 习 
三 口 打开 时 使 焦点 在 面板 中 四 
文本 字段 的 属性 面板 如 图 12-14 所 示 ,主要 属性 有 文 。 回 异 大 外 旺 现 ( 使 用 屏幕 读 取 器 时 禁用 ) O) 


本 域 的 名 称 ,字符 宽 度 、 最 多 字符 数 、 类 型 .初始 值 、 禁 用 、 _ 本 
只 读 , 它 们 的 作用 如 下 。 图 12-13 设置 不 显示 辅助 功能 属性 


文本 域 字符 宽度 人 | | 类 型 中 单 和 6) Og 行 D 。 〇 乾 码 四 
textfield 最 多 宇 行 数 初始 值 C) ] 
茶 用 四 ) 
口 R 读 四 


图 12-14 文本 字段 的 属性 面板 


(1) 文本 域 

文本 域 用 来 输入 文本 字段 的 名 称 , 默 认为 textfield。 

(2) 字符 宽度 

输入 一 个 整数 值 , 用 来 设置 文本 字段 的 宽度 。 

(3) 最 多 字符 数 

输入 一 个 整数 值 ,用 来 设置 用 户 在 文本 字段 中 能 输入 的 最 多 字符 数 。 如 果 字 符 宽 度 设 
置 为 30, 最 多 字符 数 设 置 为 15 ,那么 用 户 在 文本 字段 中 只 能 输入 15 个 字符 。 

(4) 类 型 

可 选 值 有 :“ 单 行 "“ 多 行 "“ 密 码 ”。 选 择 “ 单 行 ", 文 本 字段 就 是 一 个 单行 的 文本 框 ; 
选择 “多 行 ”, 文 本 字段 就 是 一 个 多 行 的 文本 区 域 ; 选择 “密码 ”, 文 本 字段 就 是 一 个 单行 的 密码 
输入 框 , 它 跟 单 行 的 区 别 是 ,输入 的 内 容 只 用 星 号 代替 。 上 默认 情况 下 文本 字段 是 “单行 "类 型 。 

(5) 初始 值 

用 于 设置 文本 字段 显示 的 内 容 。 在 这 里 输入 的 内 容 会 在 文本 字段 中 显示 出 来 ,一 般 用 
来 设置 一 些 对 用 户 的 提示 ,比如 “请 输入 16 位 密码 ”。 

(6) 禁用 

如 果 选 择 * 禁 用 ” 复 选 框 ,那么 浏览 网 页 的 时 候 , 用 户 就 不 能 在 这 个 文本 字段 中 输入 内 
容 ,并 且 设 置 的 初始 值 也 没 用 ,因为 提交 表单 信息 的 时 候 , 初 始 值 不 会 被 提交 给 Web 服 
务 器 。 

(7) 只 读 

如 果 选 择 * 只 读 ” 复 选 框 ,那么 浏览 网 页 的 时 候 , 用 户 也 不 能 在 这 个 文本 字段 中 输入 内 
容 ,但 是 与 禁用 不 同 的 是 ,在 只 读 性 质 的 文本 字段 中 设置 的 初始 值 , 会 被 提交 给 Web 服 
务 器 。 

2. 添加 隐藏 域 

单 击 * 插 入 ”面板 上 的 中 图 标 ,就 在 网 页 中 添加 一 个 隐藏 域 。 隐 藏 域 的 属性 面板 如 
图 12-15 所 示 ,主要 属性 有 隐藏 区 域 的 名 称 和 值 , 它 们 的 作用 如 下 。 
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隐 寄 区 域 
NhiadenField 值 @) | 


图 12-15 隐藏 域 的 属性 面板 


(1) 隐藏 区 域 

隐藏 区 域 用 来 输入 隐藏 域 的 名 称 , 默 认 名 称 为 hiddenField。 

(2) 值 

值 用 来 输入 隐藏 域 的 值 。 这 个 值 将 被 隐藏 在 网 页 的 表单 中 ,如 果 表 单 信息 被 提交 给 
Web 服务 器 ,这 个 值 也 将 被 提交 。 

3. 添加 文本 区 域 

单 击 * 插 入? 面板 上 的 园 图 标 ,就 在 网 页 中 添加 一 个 文本 区 域 。 文 本 区 域 的 属性 面板 和 
文本 字段 的 几乎 一 样 , 如 图 12-16 所 示 。 不 同 的 是 ,文本 域 的 默认 名 称 为 textarea, 默 认 类 型 


为 多 行 。 
文本 域 字符 宽度 如 | 本。 类 型 DO 单行 6) 。 回 多 行 几 。 〇 密友 所 
[textures | 行 数 5 | 初 语 值 四 
禁用 员 
口 A 访 四 
图 12-16 文本 区 域 的 属性 面板 
4. 添加 复 选 框 


单 击 * 插 入 ?面板 上 的 图 标 网 ,就 在 网 页 中 添加 一 个 复 选 框 。 复 选 框 的 属性 面板 如 
图 12-17 所 示 ,主要 属性 有 复 选 框 名 称 、. 选 定 值 和 初始 状态 ,它们 的 作用 如 下 。 


复 选 框 名 称 达 二 WwW | 初始 状态 〇 已 匀 选 C) 
区 


12-17 复 选 框 的 属性 面板 


(1) 复 选 框 名 称 

复 选 框 名 称 用 来 输入 复 选 框 的 名 称 , 默 认 名 称 为 checkbox。 如 果 多 个 复 选 框 属于 同一 
组 ,那么 这 些 复 选 框 的 名 称 应 该 设置 成 一 样 的 。 

(2) 选 定 值 

选 定 值 用 来 设 定 一 个 值 , 当 复 选 框 被 选中 的 时 候 , Web 服务 器 将 从 表单 信息 中 读 到 这 
个 值 。 
(3) 初始 状态 
初始 状态 有 两 个 可 选 值 : 已 选择 和 未 选择 。 如 果 选 择 “ 已 勾 选 " 单 选 按 钮 ,那么 在 浏览 
网 页 的 时 候 , 会 看 到 复 选 框 一 开始 就 被 打上 一 个 勾 ; 如 果 选 择 “ 未 选中 ” 单 选 按钮 ,情况 就 跟 
前 面 的 相反 。 一 般 情况 下 .“ 已 勾 选 "用 来 设置 一 个 默认 的 选项 。 

5. 添加 单 选 按 钮 

单 击 “ 插 入 ”面板 上 的 | 回 图 标 ,就 在 网 页 中 添加 一 个 单 选 按钮 。 单 选 按钮 的 属性 面板 如 
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图 12-18 所 示 ,主要 属性 有 单 选 按钮 名 称 、 选 定 值 和 初始 状态 ,它们 的 作用 如 下 。 


单 选 按钮 选 定 值 rati。 | 初始 状 态 〇 已 匀 选 CC) 
radio 寺中 


图 12-18 单 选 按钮 的 属性 面板 


(1) 单 选 按钮 

单 选 按钮 用 来 输入 单 选 按钮 的 名 称 , 默 认 名 称 为 radio。 如 果 多 个 单 选 按钮 属于 同一 
组 ,那么 这 些 单 选 按钮 的 名 称 应 该 设置 成 一 样 的 ,这 样 才能 实现 单 选 的 效果 。 

(2) 选 定 值 

选 定 值 用 来 设 定 一 个 值 , 当 单 选 按钮 被 选择 的 时 候 , Web 服务 器 将 从 提交 上 来 的 表单 
信息 中 读 到 这 个 值 。 

(3) 初始 状态 

初始 状态 有 两 个 可 选 值 : 已 选择 和 未 选择 。 作 用 和 复 选 框 的 初始 状态 一 样 。 

6. 添加 复 选 框 组 

单 击 “ 插 入 ?面板 上 的 “ 复 选 框 组 图标 图 ,弹出 一 个 对 话 框 ,如 图 12-19 所 示 。 在 对 话 
框 中 可 输入 整个 复 选 框 组 的 名 称 ( 默 认为 CheckboxGroup n) ,可 单 击 “十 ?或 “一 ”按钮 增加 
或 减少 组 中 复 选 框 的 个 数 ,可 单 击 * 标 签 或 “ 值 * 下 面 的 文本 修改 复 选 框 的 标签 文字 和 值 。 

通过 复 选 框 组 可 以 一 次 添加 多 个 复 选 框 。 


名 称 : CheckboxGroup1l 
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值 
六 一 一 并 
复 选 框 


布局 ,使 用 : @ 换行 符 ( cbr> 标签 ) 
〇 表格 


图 12-19 添加 复 选 框 组 


7. 添加 单 选 按钮 组 

单 击 “ 搬 入 ?面板 上 的 * 单 选 按钮 组 "图标 区] ,弹出 一 个 对 话 框 ,如 图 12-20 所 示 。 在 对 
话 框 中 可 输入 整个 单 选 按钮 组 的 名 称 (默认 为 RadioGroup n) ,可 单 击 “十 ?或 “一 ?按钮 增加 
或 减少 组 中 单 选 按 钮 的 个 数 ,并 且 可 以 单 击 “ 标 签 ” 或 “ 值 ” 下 面 的 文本 修改 单 选 按钮 的 标签 
文字 和 值 。 

通过 单 选 按钮 组 可 以 一 次 添加 多 个 单 选 按钮 ,而 且 可 以 避免 “ 同 组 的 单 选 按钮 不 同名 ” 
的 错误 。 

8. 添加 列表 /菜单 

单 击 “ 插 入 ”面板 上 的 国 图 标 ,就 在 网 页 中 添加 一 个 “列表 /菜单 "对象 。“ 列 表 / 菜 单 ” 对 
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布局 ,使 用 : @) 换行 符 ( br> 标签 ) 
〇 表格 


图 12-20 ”添加 单 选 按 钮 组 


象 的 属性 面板 如 图 12-21 所 示 ,主要 属性 有 对 象 的 名 称 、 类 型 .列表 值 和 初始 化 时 选 定 , 它 们 


的 作用 如 下 。 
选择 类 型 四 哥 单 吊 [| 放下 
[ae] 口红 加 人 许多 过 
初始 化 时 选 定 
图 12-21 “列表 /菜单 ”的 属性 面板 
(1) 选择 
选择 用 来 输入 “列表 /菜单 ”对象 的 名 称 , 默 认 值 为 select。 
(2) 类 型 


类 型 的 可 选 值 有 : 菜单 和 列表 。 如 果 选 择 * 菜 单 " 单 选 按钮 ,该 对 象 的 外 观 就 是 一 个 菜 
单 ,只 占据 一 行 的 位 置 ,通过 单 击 才能 出 现 多 个 选项 ; 如 果 选 择 * 列 表单 选 按钮 ,该 对 象 的 
外 观 就 是 一 个 列表 ,一 般 占据 多 行 ,根据 列表 值 的 多 少 来 决定 。 

当选 中 列表 时 ,属性 面板 上 的 “高 度 ”" 和 * 选 定 范围 "会 被 激活 。 


(3) 高 度 

高 度 用 来 设置 列表 的 高 度 ,输入 一 个 整数 ,代表 列表 将 显示 为 n 行 的 高 度 。 

(4) 选 定 范围 

可 选 值 为 “允许 多 选 "。 如 果 选 择 “ 允 许多 选 " 复 选 框 ,那么 在 浏览 网 页 的 时 候 , 用 户 可 以 
在 列表 中 同时 选择 多 个 。 

(5) 列表 值 


列表 值 用 来 设 定 列表 或 菜单 中 的 选项 , 单 击 “ 列 表 值 ”按钮 ,弹出 如 图 12-22 所 示 的 “ 列 
表 值 ”对 话 框 ,可 以 通过 “十 ”或 “一 ”按钮 来 增加 或 减少 选项 ,并 通过 单 击 “ 项 目标 签 ” 或 “ 值 ” 
下 方 的 文本 或 空白 处 ,来 修改 或 添加 标签 内 容 或 值 。 

(6) 初始 化 时 选 定 

添加 完 列表 值 之 后 , “初始化 时 选 定 ” 框 中 就 会 显示 多 个 列表 值 ,选择 其 中 一 个 ,可 作为 
列表 或 菜单 的 默认 选 值 。 
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图 12-22 列表 值 


9. 添加 跳 转 菜单 

单 击 “ 插 入 ”面板 上 的 国 图 标 , 会 弹出 一 个 对 话 框 ,如 图 12-23 所 示 。 在 “插入 跳 转 菜 
单 ” 的 对 话 框 中 ,可 添加 或 减少 菜单 项 ,可 通过 上 移 和 下 移 键 调整 这 些 项 目的 顺序 ,可 选择 某 
个 项 目 然后 在 文本 栏 中 修改 项 目的 名 称 ,并 且 通 过 “浏览 ”按钮 还 可 以 为 一 个 菜单 项 设 定 对 
应 的 超 链接 。 

添加 了 跳 转 菜单 之 后 ,将 它 选 中 ,属性 面板 如 图 12-24 所 示 ,主要 属性 和 作用 基本 与 列 
表 / 菜 单 " 对 象 相同 ,只 是 其 中 的 菜单 名 称 默认 为 jumpMenu。 


jumpllenu 


菜单 之 后 插入 前 往 按钮 
更 改 VRL 后 选择 第 一 个 项 目 


图 12-23 ”添加 跳 转 菜单 


选择 类 型 中 菜单 如 列 素 值 . .… 
Dan | [e490] E 因 [| 交 许多 连 
toms 
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图 12-24 跳 转 菜单 的 属性 面板 


10. 添加 文件 域 
单 击 * 插 入 ?面板 上 的 回 图 标 ,就 在 网 页 中 添加 一 个 文件 域 。 文 件 域 的 主要 属性 有 文件 
域名 称 .字符 宽度 和 最 多 字符 数 ,它们 的 作用 在 前 面 其 他 对 象 中 已 介绍 过 ,在 此 不 再 歼 述 。 
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11. 添加 按钮 
单 击 “ 插 入 ”面板 上 的 口 图 标 ,就 在 网 页 中 添加 一 个 按钮 ,其 属性 面板 如 图 12-25 所 示 ， 
主要 属性 有 按钮 名 称 、 值 和 动作 ,它们 的 作用 如 下 。 


按 包 名 称 秆 四 本 动作 加 提交 表单 @) 
Er 人 〇 重 设 表 单 四 


12-25 按钮 的 属性 面板 


(1) 按钮 名 称 

按钮 名 称 用 来 设置 按钮 的 名 称 , 默 认为 buttonz 。 

(2) 值 

值 用 来 设置 按钮 上 显示 的 文字 ,比如 “提交 ”“ 注 册 ”“ 取 消 ?等 。 

(3) 动作 

可 选 值 有 :“ 提 交 表单 "和 *“ 重 设 表 单 ”。 如 果 选 择 “ 提 交 表 单 " 单 选 按钮 ,那么 单 击 按钮 
的 时 候 ,表单 就 会 被 提 交 给 Web 服务 器 ; 如 果 选 择 “ 重 设 表单 " 单 选 按 钮 ,那么 单 击 按钮 时 ， 
用 户 在 表单 中 输入 的 数据 都 会 被 清空 。 可 见 , 单 击 按钮 的 时 候 , 到 底 执行 什么 操作 ,不 是 赁 
“ 值 ” 中 设置 的 文字 来 决定 的 。 比 如 ,设置 了 值 为 “提交 ”, 而 动作 设置 为 “ 重 设 表 单 ”, 那 么 单 
击 按钮 时 ,就 只 是 把 表单 清空 ,并 不 会 把 信息 提交 给 服务 器 。 

12. 添加 标签 

单 击 “ 插 入 ”面板 上 的 国 图 标 ,就 会 再 网 页 的 代码 视图 中 添加 一 个 过 label> 达 /label 二 
标签 ,在 这 对 标签 中 输入 文本 ,在 网 页 上 就 会 显示 相应 的 内 容 。 标 签 很 少 被 单独 添加 ,因为 
那些 需要 标签 的 对 象 ,比如 文本 字段 、 复 选 框 或 单 选 按钮 ,它们 在 添加 的 时 候 , 会 弹出 一 个 
“输入 标签 辅助 功能 属性 ”对 话 框 ,可 以 设置 标签 内 容 , 见 图 12-12。 

【案例 演示 12-1】 制作 校园 网 站 主页 上 的 用 户 登 录 
表单 ,如 图 12-26 所 示 。 

(1) 运行 Dreamweaver, 打 开 校 园 网 站 中 的 index. htm。 

(2) 在 主页 上 找到 “用户 登录 "板块 ,把 图 12-26 中 选 
中 的 图 像 删除 ,然后 为 单元 格 设置 一 个 与 网 页 背景 相近 
的 背景 色 。 

(3) 打开 “插入 ”面板 ,选中 表单 类 型 , 单 击 表单 图 标 ， 图 12-26 表单 应 用 : 用 户 登录 界面 
添加 一 个 表单 框架 到 刚刚 删除 图 像 的 单元 格 中 。 

(4) 光标 定位 在 表单 框架 中 ,然后 选择 “插入 ?面板 中 的 常用 类 型 , 单 击 表格 图 标 ,添加 
一 个 嵌 套 表格 到 表单 框架 中 。 表 格 的 属性 为 3 行 1 列 ,宽度 100 百分比 ,边框 粗细 、 单 元 格 
边 距 和 间距 都 是 0。 

(5) 在 “插入 ”面板 中 ,切换 回 表 单 类 型 ,在 嵌 套 表 
格 的 3 行 中 分 别 添加 两 个 文本 字段 和 两 个 按钮 , 如 
图 12-27 所 示 。 其 中 ,在 添加 两 个 文本 字段 时 ,分 别 输 
图 12-27 示例 中 的 表单 内 容 和 标签 内 容 为 “用 户 名 : ”和 “密码 : ”; 添加 之 后 ,把 密 
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码 对 应 的 文本 字段 的 类 型 设置 为 “密码 ”。 另 外 ,两 个 按钮 的 值 分 别 设置 为 “登录 ”和 “取消 ”， 
动作 分 别 设置 为 “提交 表单 ”和 “ 重 设 表单 ”。 

(6) 把 “用 户 名 : ”选中 ,在 属性 面板 上 选择 CSS, 单 击 “ 编 辑 规则 ”按钮 ,在 CSS 定义 中 ， 
选择 分 类 为 “类 型 ,把 Font-size 和 color 分 别 设置 为 10pt 和 白色 。 

(7) 保存 网 页 , 按 F12 键 ,浏览 网 页 中 的 表单 效果 。 

在 这 个 例子 中 ,可 能 有 两 个 问题 。 第 一 个 问题 是 ,为 什么 要 在 表单 框架 中 使 用 表格 呢 ? 
那 是 因为 表格 可 以 帮助 控制 各 个 表单 对 象 的 位 置 。 第 二 个 问题 是 ,为 什么 选择 了 “用 户 名 :” 
并 设置 了 CSS 样式 之 后 ,“ 密 码 : "两 个 字 的 样式 也 发 生 了 相同 的 变化 呢 ? 因为 选择 了 * 用 户 
名 : "时 ,事实 上 是 选择 了 一 个 标签 (在 添加 文本 字段 时 设置 了 标签 为 “用 户 名 : ”) ,这 时 设 
置 CSS 样式 ,相当 于 是 为 表单 中 的 标签 对 象 设置 样式 ,所 以 设置 之 后 ,该 网 页 中 所 有 的 表单 
对 象 一 一 标签 都 会 被 修饰 。 


< 任务 12.1 
内 容 : 制作 校园 网 站 主页 上 的 用 户 登录 表单 。 


12.3 关于 HTML: 表单 和 常见 表单 对 象 


1. 表单 

表单 对 应 的 HTML 标签 是 二 form 记 过 /form 之 ,主要 的 属性 有 action、 method、 
enctypevid、target, 分 别 对 应 属性 动作 ,方法 ,编码 类 型 表单 ID、 目 标 。 

例如 : 

< form action = "test. html" method = "post" enctype = "multipart/form-data" name = "forml" 

target =" blank" id = "forml"> 

2. 标签 

表单 中 的 标签 对 象 ,对 应 的 HTML 标签 是 一 label> 二 /label 二 ,只 要 是 在 <<label 二 和 
去 /label> 之 间 输入 的 文本 ,就 会 作为 标签 的 文本 内 容 显示 在 网 页 上 。 

3. 文本 字段 

文本 字段 对 应 的 HTML 标签 是 二 input /二 ,主要 属性 有 type、 name、 disabled、 
readonly、value、size、maxlength, 分 别 对 应 属性 类 型 ,名称 、 禁 用 、 只 读 、 值 .字符 宽度 、 最 多 字 
符 数 。 其 中 ,type 属性 的 值 一 般 是 "text" ,如 果 值 改 为 "password" ,就 表示 这 个 文本 字段 是 
个 密码 框 。 

例如 : 

< input name = "userid" type = "text" disabled = "disabled” id= "userid" value = "该 输入 框 被 禁 

用 " size = "30" maxlength = "15" readonly = "readonly" /> 

4. 隐藏 域 

隐藏 域 对 应 的 HTML 标签 也 是 二 input /二 ,主要 属性 有 type、name 和 value, 分 别 对 
应 属性 类 型 .名 称 和 值 。 其 中 ,type 属性 的 值 固定 是 "hidden"。 
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例如 : 
< input name = "hiddenField" type = "hidden" id= "hiddenField" value= "1" /> 


5. 文本 区 域 

文本 区 域 对 应 的 HTML 标签 是 二 textarea 二 二 /textarea 二 ,主要 属性 有 name、cols、 
rows, 分 别 对 应 属性 名 称 .字符 宽度 、` 行 数 ,而 初始 值 则 显示 在 过 textarea 记过 /textarea> 
这 对 标签 的 中 间 。 

例如 : 


<textarea name = "1Y" id= "1Y" cols = "45" rows = "5"> 请 留 下 您 的 宝贵 意见 </textarea> 


6. 复 选 框 

复 选 框 对 应 的 HTML 标签 也 是 二 input /请 ,主要 属性 有 name、type、value, 分 别 对 应 
属性 名 称 、 类 型 . 值 ,其 中 ,type 属性 的 值 固定 是 checkbox。 

例如 : 


< input name = "dy" type = "checkbox" id= "dy" value= "1" /> 


7. 单 选 按钮 

单 选 按钮 对 应 的 HTML 标签 也 是 二 input /二 ,主要 属性 有 name、type、value, 分 别 对 
应 属性 名 称 、 类 型 . 值 , 其 中 ,type 属性 的 值 固定 是 radio。 

例如 : 


< input type = "radio" name = "radio" id = "nan" value= "nan" /> 


8. 列表 /菜单 
“列表 /菜单 ?对象 对 应 的 HTML 标签 是 二 select 二 二 /select> ,主要 属性 有 name, 表 示 对 
象 的 名 称 ;“ 列 表 /菜单 "对象 中 的 每 一 个 选项 对 应 的 HTML 标签 是 一 option> 所 /option>， 
主要 属性 有 value 和 selected, 分 别 对 应 属性 “ 值 ”" 和 “是 否 已 选 ?。 其 中 ,selected 只 有 一 个 属 
性 值 “selected”, 如 果 在 二 option 二 中 添加 了 selected 一 "selected" ,就 表示 该 选项 默认 被 选中 ,如 
果 不 是 ,就 不 要 添加 该 属性 。 另 外 ,选项 的 内 容 被 添加 在 二 option> 所 /option> 之 间 。 
例如 : 
<select name= "start" id= "start"> 
< option value = "1"” selected = "selected"> 北 京 </option> 
< option value = "2"> 成 都 </option> 
< option value = "3"> 上 海 </option > 
< option value = "4"> 广 州 </option> 
< option value = "5"> 深 圳 </option> 
</select> 
9. 文件 域 
文件 域 对 应 的 HTML 标签 也 是 二 input /请 ,主要 属性 有 name、 type、size 和 
maxlength, 其 中 ,type 属性 的 值 固定 是 file。 
例如 : 


< input name = "userpic" type = "file" id= "userpic" size= "40" maxlength= "70" /> 
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10. 按钮 

按钮 对 应 的 HTML 标签 也 是 二 input /二 ,主要 属性 有 name、type 和 value, 其 中 ,type 
属性 的 值 固定 是 button。 

例如 : 


< input type = "submit" name = "button" id = "button" value = "提交 " /> 


媳 忆 波 


网 页 制作 : Flash 


本 章 介绍 Flash 动画 的 基本 技术 ,包括 帧 .时 间 轴 、 补 间 、 元 件 . 遮 单 和 动作 等 ,并 介绍 网 
站 导入 页 的 制作 方法 ,为 以 后 更 专业 、 更 系统 地 学 习 Flash 动画 制作 打下 一 定 的 基础 。 

本 章 学 习 要 点 : 

(1) 了 解 Flash 的 常用 工具 和 面板 

(2) 了 解 动作 的 作用 

(3) 理解 Flash 动画 制作 的 基本 原理 

(4) 理解 帧 ` 图 层 和 时 间 轴 的 作用 

(5) 理解 补 间 和 元 件 的 作用 

(6) 理解 庶 罩 的 作用 

(7) 掌握 帧 ` 图 层 和 时 间 轴 的 基本 使 用 方法 

(8) 掌握 补 间 和 元 件 的 基本 使 用 方法 

(9) 掌握 遮 单 的 基本 使 用 方法 

(10) 掌握 导出 网 页 的 方法 


13.1 初 识 Flash 


Flash 是 一 款 平面 动画 制作 软件 ,特别 适用 于 创建 在 Internet 中 的 应 用 ,因为 它 的 文件 
非常 小 。Flash 被 广泛 应 用 于 制作 互联 网 中 的 网 页 动画 ,网 站 开发 者 可 以 使 用 它 制作 出 漂 
亮 的 网 页 导入 页 面 或 实现 页 面 上 的 广告 特效 。 

Flash 包含 了 动画 设计 的 三 大 基本 功能 : 绘图 和 编辑 图 形 、 补 间 动 画 和 和 遮 罩 功能 ,支持 
图 片 .声音 ,视频 和 多 种 特殊 效果 的 添加 。 本 书 将 使 用 Adobe Flash CS5 来 完成 网 页 平面 动 
画 的 制作 。 


13.1.1 安装 Flash 


双击 Flash CS5 的 安装 程序 ,进入 安装 界面 ,如 图 13-1 所 示 。 

安装 步骤 如 下 。 

(1) 单 击 “接受 ?按钮 ,进入 下 一 步 。 

(2) 输入 序列 号 ,并 选择 语言 为 “简体 中 文 ”仍然 单 击 * 下 一 步 "按钮 。 

(3) 在 “输入 Adobe ID 界面 中 ,可 以 选择 创建 Adobe ID, 也 可 以 跳 过 此 步骤 。 

(4) 接着 ,进入 "安装 选项 界面 ,在 此 界面 的 “位 置 " 栏 中 ,可 以 通过 单 击 右边 的 文件 夹 
图 标 ,选择 更 改 程序 的 安装 位 置 , 如 图 13-2 所 示 。 
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M Adobe Flash Pro CS5 


欢迎 使 用 
I Adobe Flash Pro CS5 安 : 


Adobe 软件 许可 协议 
ADOBE 
软件 许可 协议 


用 户 须知 : 请 仔 闸 阅读 本 协议 。 相 软件 的 所 有 或 任何 部 分 一 经 复制 、 安 装 或 使 用 ， 您 即 接受 本 协议 中 规定 的 所 有 
条 款 和 条 件 ， 特 列 是 其 中 对 下 列 内 容 的 规定 : 可 转让 性 ( 第 4 条 ) 、 担 保 ( 第 6 和 第 7 条 ) 、 责 任 ( 第 8 条 ) 以 及 连 
接 性 和 隐秘 ( 第 14 条 ) ， 以 及 特殊 规定 和 例外 ( 第 16 条 ) 。 悠 同意 本 协议 与 由 您 签署 的 任何 通过 谈判 订立 的 任何 
书面 协议 一 样 。 丰 协议 对 您 和 取得 软件 并 由 他 人 代表 使 用 本 软件 的 任何 法 人 实体 均 可 执行 : 例如 您 的 容 主 ( 如 果 
适用 ) 。 加 不 同意 本 协议 的 条 款 ， 请 不 要 使 月 本 软件 。 有 关 本 软件 退回 和 退 款 的 信息 ,请 浏览 

http/www adote comjgolsupport cn。 


您 可 以 与 ADOBE 直 接 订 立 另 一 书面 协议 ( 加 批量 许可 证 协议 ) ， 补 充 或 普 执 本 协议 的 全 部 或 任何 部 分 。 


ADOBE 及 其 供应 商 拥有 本 软件 的 所 有 知识 产权 。 本 软件 只 供 许可 使 用 ,不 得 出 售 。ADOBE 只 多 许 作 在 遵守 本 协 
议和 项 条 款 的 情 吕 下 复制 使 用 、 下 载 、 安 装 、 使 用 或 以 其 地方 式 受益 于 本 软件 的 功能 或 知识 产权 。 使 用 本 软件 所 
包含 的 ， 或 通过 让 软件 访问 的 一 些 ADOBE 和 在 ADOBE 材 料 与 服务 ， 可 能 需 遭 守 其 地 条 款 与 条 件 ， 这 些 条 款 与 条 
件 一 般 载 于 单独 的 许可 协议 、 使 用 条 款 ， 或 该 材料 或 服务 内 部 或 周围 的 局 述 文件 中 ,或 可 在 

hipJwww adoke co hhirdpart，cn 上 找到 。 您 可 以 在 该 网 站 上 找到 关于 非 ADOBE 村 料 的 必要 声 必 , 


本 软件 可 能 导致 客 的 计算 机 自动 连 按 到 因 怕 同 。 有 关 其 他 信息 ， 请 参见 第 14 和 16 条 , 


图 13-1 Flash CS5 安装 界面 1 


MN Adobe Flash Pro C55 
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人 
v 所 有 组 件 
出 ADOBE FLASH PRO CS5 M 人 出 ADOBE FLASH PROCS5 


欢迎 使 用 ¥ Adobe Media Encoder 191 Ma 
序列 号 V Adobe Extension Man 55 MB 
Adobe ID V Adobe Device Central ss 
选项 V Adobe wedia Player em 


V Packager for iPhonea 133 MB 


安装 总 大 小 : 1.5 GB 


食 置 : 
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图 13-2 Flash CS5 安装 界面 2 
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(5) 单 击 “ 安 装 "按钮 之 后 ,就 进入 “安装 进度 "界面, 等待 几 分 钟 ,Flash CS5 安装 完成 ， 
单 击 “ 完 成 "按钮 , 即 结束 Flash CS5 的 安装 。 


13.1.2 Flash 的 界面 和 工具 


1. Flash 编辑 界面 

运行 Flash 软件 ,可 以 看 到 Flash 的 编辑 界面 与 Fireworks 和 Dreamweaver 类 似 ,包含 
了 菜单 .文档 编辑 窗口 和 一 些 工具 面板 。 在 Flash 编辑 界面 的 下 面 是 时 间 轴 和 动画 编辑 器 
面板 ; 在 右 侧 默认 显示 的 是 属性 面板 和 库 面板 以 及 一 些 常 用 的 工具 按钮 ; 在 属性 面板 的 左 
侧 集中 了 一 些 常 用 的 面板 图 标 ,包括 颜色 本 . 伴 木 国 .对齐 属 .信息 感 .变形 下 E 、 代 
码 片段 国 组建 和 动画 预 设 天 , 单 击 它们 就 可 以 打开 对 应 的 面板 ,如 图 13-3 所 示 。 


Fl | xe | ® | 0sw “” 世 呈 区 滞 

文件 () ”编辑 (上 ”视图 (D 插入 (D 修改 轨 文 本 (DD 命令 ”控制 (0) 调式 0) 鲁 口 轨 帮助 0 
未 命名 -1 国 _ 站 

国志 最 1 名 外 mm “lg 口 本 轩 

图 来 全 各 -1 A 

a 

播放 器 : Flash Player 10 只 

9 脚本 : ActionsSeript 3.0 省 

于 加 工 

但 配置 文件 : 默认 文件 到 ™ 

4 > 可 AIR 设 置 。 源 沪 。 哆 

i Adonsort 认 时 [ES | | 

Sal 5 Ww 5 2 23 30 品质 性 上 

国有 

Fps: 2409 邓 

大 小 : 550 x 400 像 党 编 得. & 

舞台 : Ed 

SWF 后 六 记录 2 

EE LE 起 

EU ob! Mm aas HS 
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单 击 右 侧 面板 上 方 的 国 国 图 标 , 可 以 展开 面板 ; 单 击 恩 一 图 标 ,可 以 把 面板 折 笃 为 图 
标 。 比 如 把 常用 工具 按钮 所 在 的 面板 折 和 三 为 图 标 之 后 ,面板 就 显示 为 一 个 图 标 落 。 

2. 常用 工具 按钮 

Flash 的 常用 工具 按钮 被 放置 在 “工具 ”面板 中 。 单 击 “窗口 "菜单 ,选择 “工具 ”菜单 项 
或 者 直接 按 Ctrl 十 F2 键 ,就 可 以 打开 或 关闭 “工具 ”面板 。 每 个 工具 按钮 对 应 的 图 标 、 名 称 
和 作用 如 下 。 

(1) 项 选择 ?工具 ,用 于 选择 动画 编辑 界面 中 的 一 个 或 多 个 对 象 。 

(2) [ 顺 ,部 分 选取 ?工具 ,用 于 选择 对 象 的 一 部 分 ,如 线条 上 的 某 个 节点 。 

(3) 咕 昌 “任意 变形 ”工具 ,用 于 改变 对 象 的 大 小 .形状 和 方向 。 

(4) 了 晤 | ， 套 索 ? 工 具 , 用 于 选择 对 象 的 轮廓 。 

(5) 加 ,钢笔 ?工具 ,用 于 绘制 动画 中 的 对 象 。 
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(6) 加,“ 文 本 ”工具 ,用 于 输入 文本 。 

(7) I ,“ 线 条 ”工具 ,用 于 绘制 直线 。 

(8) 国 ,和 矩形 工具 ,用 于 绘制 矩形 。 

(9) [到 | “铅笔 ?工具 ,用 于 绘制 任意 形状 的 普通 线条 。 

(10) 玩 ，… 刷 子 ? 工 具 , 用 于 绘制 样式 类 似 于 毛笔 的 任意 形状 的 线条 。 

(11) 网 |， 颜料 桶 ?工具 ,用 于 对 选中 的 对 象 进行 颜 色 填充 。 

(12) 1 ,“ 滴 管 "工具 ,用 于 选取 颜色 ,以 便 在 颜色 填充 时 使 用 。 

(13) 下,“ 橡皮 擦 ” 工 具 , 用 于 擦 除 对 象 。 

(14) RR 员 ,“ 手 形 ” 工 具 , 用 于 挪动 动画 编辑 窗口 中 的 舞台 ,以 便 查看 到 目标 位 置 。 

(15) 区 ,“ 缩 放 ” 工 具 , 用 于 放大 或 缩小 动画 编辑 界面 ,默认 情况 下 是 “放大 ”工具 , 按 
Alt 键 后 会 转变 成 “缩小 ”工具 。 

当选 择 不 同 的 工具 时 ,属性 面板 上 会 出 现 对 应 该 工具 的 属性 选项 。 


13.1.3 Flash 文档 的 基本 操作 


1. 新 建 Flash 文档 
选择 "文件 ”新 建 命 令 ,在 弹出 的 如 图 13-4 所 示 对 话 框 中 选择 ActionScript 3. 0 选 
项 , 单 击 “ 确 定 ” 按 钮 即 可 。 


帝 栅 三 | 加 
类 型 QT) ET 
中 全 人 的 人文 寺 人 0。 
ActionScript 2.0 会 ActionScript 3.0 的 发 布设 置 。 FLA 
是 Re 2 件 设 置 为 Adobe Fash Player 发 布 的 SWF 文件 的 媒体 
时 Phone os sh 
私 res Lte 4 
和 Adobe Device Central 
侣 Adionsapt 3.0 类 
多 Adion5apt 3.0 接 口 
本 ActionScrpt 文 件 
本 ActionScript 通信 文件 
本 Fash JavaScript 文件 
四 Fash 项 目 


图 13-4 ”新建 Flash 文档 


ActionScript 3.0 简称 AS 3. 0, 是 从 Adobe Flash CS3 版 本 开始 之 后 ,出 现 的 一 种 编码 
格式 ,CS3 之 前 的 Flash 只 支持 ActionScript 2. 0 的 编码 格式 。 一 般 软 件 都 有 “向 下 兼容 ”的 
特点 ,也 就 是 说 ,支持 AS 3. 0 的 版 本 也 能 支持 AS 2. 0, 但 是 反 过 来 就 不 行 了 。 所 以 说 ,如 果 
创建 了 一 个 ActionScript 3. 0 的 Flash 文档 ,那么 ,使 用 CS3 之 前 的 Flash 软件 是 打 不 开 这 
个 文档 的 。 在 创建 Flash 文档 时 ,要 考虑 到 Flash 版 本 的 支持 问题 ,来 决定 是 选择 AS 3.0 
还 是 AS 2.0。 
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2. 保存 文档 

选择 “文件 ”>“ 保 存 ” 命 令 或 者 直接 按 Ctrl 十 S 键 ,一 样 可 以 保存 文档 。 在 “另存 为 ”对 
话 框 中 ,如 图 13-5 所 示 ,选择 要 存放 Flash 文档 的 位 置 ,然后 输入 文件 名 ,选择 “保存 类 型 ” 
为 默认 的 “Flash CS5 文档 (* . fla)”, 然 后 单 击 “ 保 存 ” 按 钮 就 可 以 了 。 


保存 在 四: | 回 Flssh 环 节 


文件 各 人 ;sumplel 
保存 类 型 中 ): [Flash Cs5 文档 (全) 


图 13-5 保存 Flash 文 档 


保存 下 来 的 Flash 文档 也 叫做 Flash 作品 的 “ 源 文件 ”, 它 的 后 级 名 是 “. fla”, 就 像 
Fireworks 中 创建 的 png 格式 的 文档 是 图 像 的 源 文 件 一 样 。png 文档 不 是 最 后 的 产品 ,要 导 
出 生成 jpg 或 gif 格式 的 图 像 , 才 算是 可 以 应 用 在 网 页 上 的 成 品 ; 同样 的 ,fla 文档 也 不 是 最 
后 要 应 用 在 网 页 上 的 Flash 作品 ,要 使 用 fla 文档 作为 源 文件 ,导出 之 后 ,才能 得 到 最 终 看 到 
的 Flash 作品 。 

3. 关闭 文档 

创建 并 保存 了 Flash 文档 之 后 ,在 Flash 文档 编辑 窗口 的 左上 角 , 可 以 看 到 一 个 文档 的 
名 字 标 签 , 单 击 名 字 标 签 右 侧 的 国 | 图 标 , 就 可 以 把 文档 关闭 ; 或 者 按 Ctrl 十 W 键 ,也 可 以 
将 文档 关闭 。 

4. 打开 文档 

选择 “文件 ”>“ 打 开 ” 命 令 或 者 直接 按 Ctrl 十 O 键 ,可 以 弹出 “打开 ”对 话 框 ,在 对 话 框 中 
选择 要 打开 的 文档 ,然后 单 击 “打开 ?按钮 即 可 。 


5. 测试 影片 

选择 “控制 ”>“ 测 试 影片 >“ 测试 "命令 或 直接 按 Ctrl 十 Enter 键 ,就 能 对 Flash 作品 进 
行 测试 。 

6. 导出 影片 


Flash 作品 ,也 被 叫做 “影片 ”, 它 是 由 Flash 源 文件 导出 生成 。 选 择 “ 文 件 ”>“ 导 出 ”一 
“导出 影片 ”命令 ,在 弹出 的 如 图 13-6 所 示 对 话 框 中 选择 存放 影片 的 位 置 , 然 后 输入 文件 名 ， 
选择 保存 类 型 为 "SWF 影片 ( x . swf)”, 再 单 击 “ 保 存 ” 按 钮 ,这 样 就 生成 一 个 Flash 作品 了 。 
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保存 在 四: | 回 Pash 环 节 


| 国 swnlel 


[ 
Recent 


文件 名 中 
保存 类 型 部): 。 | SWF 影片 Gswf) 
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注意 ,Flash 作品 文件 的 扩展 名 是 . swf, 要 把 它 跟 . fla 文件 区 分 清楚 。 

另外 ,进行 影片 测试 的 时 候 , 在 Flash 作品 源 文件 的 存放 目录 下 ,会 自动 生成 一 个 同名 
的 Flash 作品 文件 。 所 以 测试 之 后 再 导出 影片 ,如 果 选 择 的 存放 位 置 和 名 称 也 跟 源 文件 一 
样 ,那么 就 会 提示 ”是否 要 替换 ,这 时 可 选择 “是 ”, 将 测试 时 产生 的 作品 替换 。 


13.1.4 Flash 文档 的 属性 


在 Flash 编辑 窗口 中 ,整个 Flash 文档 也 叫做 “舞台 ”, 因 为 在 Flash 中 添加 的 各 种 对 象 、 
最 后 生成 的 动画 效果 ,就 好 像 各 种 物体 在 舞台 上 表演 一 
样 。 在 舞台 的 外 面 单 击 ,就 表示 不 选中 Flash 文档 中 的 
任何 对 象 ,这 时 ,编辑 窗口 右边 的 属性 面板 上 将 显示 
Flash 文档 的 属性 ,如 图 13-7 所 示 。 


Flash 文档 的 3 个 重要 属性 含义 如 下 。 
1. FPS 大 小 : 550 x 400 人 这 
FPS 是 Frames Percent Second 的 缩写 ,表示 每 秒 舞台 : 


帧 数 ,所 以 FPS 也 叫做 帧 频 。 帧 是 Flash 动画 中 的 一 个 
重要 概念 ,在 下 一 节 将 进行 介绍 。Flash 文档 默认 的 帧 
频 是 24, 当 帧 频 越 大 时 ,动画 播放 的 速度 将 越 快 ,反之 越 慢 。 

单 击 属性 面板 上 FPS 右 侧 的 “24. 00”, 将 出 现 一 个 输入 框 ,在 输入 框 中 输入 一 个 整数 ， 
就 可 以 改变 帧 频 。 

2. 舞台 

属性 面板 上 的 “舞台 ”用 来 设置 Flash 文档 的 背景 色 , 默 认 情况 下 是 白色 。 单 击 “ 舞 台 ” 
右 侧 的 白色 方块 ,将 弹出 一 个 颜色 选择 框 , 单 击 其 中 的 某 个 色 块 ,就 可 以 将 舞台 背景 色 改变 。 


图 13-7 Flash 文 档 属性 面板 
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E A 

Flash 文档 默认 的 大 小 时 550 X400 像素 ,表示 Flash 舞台 宽 550 像素 ,高 400 像素 。 单 
击 “550X 400 像素 ” 右 侧 的 “编辑 ”按钮 ,打开 图 13-8 所 示 的 对 话 框 , 在 “尺寸 ? 栏 输入 宽度 和 
高 度 , 以 改变 文档 大 小 。 另 外 ,该 对 话 框 中 有 “背景 颜色 ”和 “ 帧 频 ” 的 设置 ,其 作用 相当 于 属 
性 面板 上 的 “舞台 ”和 “FPS”, 设 置 方法 相同 。 


尺寸 OO 和 (宽度 )x [300 信条 (高度 》 
区 调整 3D 透视 角度 以 保留 当前 拓 台 投影 (A 


标尺 单位 (R}| 信 未 |v] [WE: © i(E) 


人) 


方 县 新 色 : 国 | 
帧 业 (F):24.00 
设 为 默认 值 (M) 
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单 击 属性 面板 上 的 医 开 图 标 , 可 以 把 面板 收 起 ,图 标 将 变 成 国 罚 。 反 过 来 ,可 以 把 面板 
打开 。 
在 属性 面板 上 ,还 包含 一 个 “发 布 ”面板 ,如 图 13-9 所 示 , 用 在 Flash 作品 导出 的 时 候 设 
置 一 些 相关 的 信息 ,这 个 面板 将 在 后 面 章节 进行 介绍 。 
【案例 演示 13-1】 制作 一 个 简单 的 Flash 作品 ,效果 如 图 13-10 所 示 。 
呆 发布 


播放 器 : Flash Player 10 


; ActionScript 3.0 
ee 文件 四 视图 中， 控制 C) 调 二 中 ) 


配置 文件 : 默认 文件 


AR 设置 
Adtionscript 设置 


图 13-9 “发 布 ?面板 图 13-10 Flash 案例 


(1) 运行 Flash ,新 建 一 个 ActionScript 3. 0 的 文档 ,保存 为 samplel. fla。 

(2) 单 击 工 具 面 板 上 的 “选择 ”工具 ,在 Flash 舞台 的 外 面 单 击 ,在 属性 面板 上 设置 舞台 
的 背景 色 为 #990000, 设 置 大 小 为 *300X200”。 

(3) 选择 “文本 "工具 ,在 属性 面板 上 设置 文本 属性 “| 司 
(如 图 13-11 所 示 ) ,然后 在 舞台 上 输入 “Flash 示例 1”。 i ss 二 

(4) 单 击 属性 面板 左 侧 的 “对 齐 " 按 钮 上 | .在 "对齐 ” ny 
面板 中 把 “与 舞台 对 齐 ” 选 中 ,然后 单 击 对 齐 中 的 “水 平 对 颜色 : [一 ] 字 距 调整 ;0 
齐 ” 按 钮 图 和 “年 直 对 齐 "按钮 地。 图 13-11 文本 属性 面板 


dl, 
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(5) 测试 影片 ,查看 效果 。 
(6) 再 次 保存 源 文件 ,然后 导出 影片 ,保存 Flash 作品 文件 名 为 samplel. swf。 
注意 : 上 面 的 示例 并 不 是 一 个 动画 ,下 面 将 介绍 动画 的 基本 原理 。 


13.2 Flash 动画 的 基本 原理 


13.2.1 帧 的 概念 


理解 Flash 动画 的 基本 原理 ,要 先 了 解 帧 和 补 间 的 概念 。 

1. 帧 

动画 是 由 许多 具有 连贯 性 的 静态 画面 组 成 的 。 这 些 画 面 连 在 一 起 快速 播放 ,在 人 的 大 
脑 中 形成 一 个 连贯 的 印象 ,画面 中 的 物体 就 好 像 会 动 一 样 ,因而 生成 动画 。 

那么 动画 和 帧 有 什么 关系 呢 ? 

在 汉语 的 解释 中 光一 幅 字画 叫做 一 帧 ”, 所 以 光 帧 ”可 以 理解 为 一 个 画面 的 意思 。 既 然 
动画 是 由 画面 组 成 的 ,那么 换 句 话说 ,动画 就 是 由 * 帧 ?组 成 的 。 在 Flash 中 ,“ 帧 ” 指 的 是 动 
画 中 的 一 个 单 幅 影 像 画 面 , 是 动画 中 的 最 小 单位 。 有 时 候 必 帧 也 被 看 做 是 动画 中 的 一 个 状 
态 。 当 多 个 帧 连 着 播放 的 时 候 , 就 形成 了 Flash 中 的 动画 。 

2. 关键 帧 和 过 渡 帧 

任何 动画 要 表现 运动 或 变化 ,至 少 要 给 出 开始 和 结束 两 个 不 同 的 状态 ,这 两 个 状态 称 为 
“关键 状态 ”。 在 Flash 中 ,表示 关键 状态 的 帧 叫做 关键 帧 。 

由 一 个 关键 状态 变化 到 另外 一 个 关键 状态 ,这 个 过 程 中 包含 了 许多 渐变 的 画面 ,这 些 画 
面 叫做 “过 渡 画 面 ”, 也 叫 * 过 渡 状 态 ”。 在 计算 机 动画 制作 技术 还 没有 出 现 的 年 代 , 传 统 的 动 
画 制作 必须 绘制 动画 中 两 个 关键 状态 之 间 的 每 一 个 过 渡 画 面 。 但 是 现在 ,在 Flash 中 ,两 个 
关键 状态 之 间 的 变化 过 程 可 以 由 计算 机 计算 后 自动 产生 。 也 就 是 说 ,Flash 能 够 自动 产生 
两 个 关键 状态 之 间 的 所 有 过 渡 状 态 ,每 个 过 渡 状 态 都 对 应 一 个 帧 ,叫做 “过 渡 帧 ”。 

在 Flash 的 制作 过 程 中 ,对 初学 者 而 言 , 经 常会 把 关键 帧 和 非 关键 帧 混淆 。 要 区 分 它 
们 ,可 以 从 帧 的 标志 来 进行 辨别 。 一 般 帧 的 标志 是 一 个 灰色 的 小 矩形 块 , 而 关键 帧 的 标志 是 
图 ,这 个 是 辨别 关键 帧 的 一 个 有 效 方法 。 

另外 ,如 果 一 个 关键 帧 是 空 的 ,叫做 “空白 关键 帧 ”, 它 的 标志 是 加 .表示 该 帧 没有 包含 任 
何 内 容 。 

3. 帧 频 

在 上 一 节 , 了 解 了 帧 频 的 含义 。 那 么 ,为 什么 帧 频 越 高 ,动画 的 播放 速度 越 快 呢 ? 

假设 ,一 个 动画 由 120 帧 组 成 ,如 果 帧 频 设置 为 12 ,那么 这 个 动画 的 播放 时 间 是 10 秒 ; 
如 果 帧 频 是 24 ,那么 动画 的 播放 时 间 就 是 5 秒 。 可 见 , 帧 频 越 高 ,动画 播放 所 需 的 时 间 越 
短 , 即 播放 速度 越 快 。 

可 见 ,Flash 制作 动画 的 基本 原理 是 : 计算 两 个 关键 帧 之 间 的 变化 过 程 , 根 据 需要 产生 
一 定数 量 的 过 渡 帧 ,在 关键 帧 .过 渡 帧 和 帧 频 的 共同 作用 下 产生 动画 效果 。 


13.2.2 图 层 和 时 间 轴 的 概念 
在 一 个 Flash 动画 中 ,除了 包含 帧 之 外 ,还 包含 多 个 图 层 ,而 帧 和 图 层 又 被 组 织 在 时 间 
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轴 面 板 上 ,以 进行 统一 的 管理 ,下 面 简单 介绍 一 下 图 层 和 “时 间 轴 ”面板 。 

1. 图 层 

一 个 Flash 动画 中 ,一 般 都 有 多 个 对 象 ,如 果 这 些 对 象 各 自 的 动画 效果 都 是 独立 的 , 那 
么 ,在 制作 动画 的 时 候 , 应 该 把 它们 放 在 不 同 的 图 层 ,以 便 对 它们 进行 分 别管 理 和 编辑 。 

在 Flash 舞台 中 ,“ 图 层 " 就 像 是 舞台 上 按 前 后 顺序 垂直 插 放 的 若干 个 屏幕 ,一 个 屏幕 播 
放 一 段 小 动画 或 者 展示 一 个 场景 ,并 且 屏 幕 上 没有 对 象 出 现 的 地 方 都 是 透明 的 ,可 以 看 到 后 
面 屏幕 的 内 容 , 这 些 屏幕 盔 加 起 来 就 生成 一 个 内 容 丰 富 而 完整 的 动画 。 

2.“ 时 间 轴 ”面板 

单 击 “ 窗 口 " 菜 单 , 选 择 “ 时 间 轴 ”菜单 项 , 即 可 打开 “时 间 轴 ”面板 ,如 图 13-12 所 示 , 它 一 
般 显示 在 Flash 文档 编辑 窗口 的 下 方 。 时 间 轴 由 图 层 、 刻 度 标志 和 播放 头 组 成 。 其 中 ,刻度 
标志 是 一 个 个 白色 ( ) 或 灰色 ( ) 的 矩形 小 块 , 一 个 刻度 用 来 添加 一 个 帧 ; 播放 头 则 是 由 一 
个 红色 透明 矩形 小 块 和 一 条 红色 直线 组 成 , 它 用 来 指示 当前 动画 播放 到 达 的 位 置 。 
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图 13-12 时 间 轴 面板 
在 “时 间 轴 ”面板 的 下 面 ,提供 了 “新 建 图 层 " 工 具 按 钮 与 上 和 “删除 图 层 " 工 具 按 钮 加 . 
13.2.3 时 间 轴 的 使 用 


在 时 间 轴 上 ,可 以 对 图 层 和 帧 分 别 进行 创建 和 删除 。 

1. 创建 和 删除 图 层 

单 击 “ 时 间 轴 ?面板 下 方 的 “新 建 图 层 "按钮 轧 || , 即 可 创建 一 个 新 的 图 层 , 图 层 的 名 字 默 
认为 “图 层 *”, 双 击 图 层 的 名 字 就 可 以 修改 其 名 称 。 

在 “图 层 ” 面 板 上 , 单 击 田 图 标 ,可 以 显示 或 隐藏 所 
有 图 层 , 如 果 单 击 的 是 某 个 图 层 中 与 图 标 锚 对 应 的 位 
置 ,将 显示 或 隐藏 该 图 层 。 如 图 13-13 中 的 第 二 张 图 ,图 
层 2 中 的 病 图 标 表示 该 层 处 于 被 隐藏 的 状态 ,图 层 中 
的 内 容 都 是 看 不 到 的 。 单 击 病 图 标 , 图 层 2 就 恢复 为 
显示 的 状态 。 

单 击 鲁 图 标 ,将 对 所 有 图 层 进行 锁定 或 解除 锁定 ， 
被 锁定 的 图 层 不 能 被 编辑 。 如 果 单 击 的 是 某 个 图 层 中 
与 入 图 标 对 应 的 位 置 ,将 对 该 图 层 进行 锁定 或 解除 锁定 。 如 图 13-13 中 的 第 二 张 图 ,图 
层 2 中 的 国 图 标 表示 该 层 处 于 被 锁定 的 状态 ,图 层 中 的 内 容 是 不 能 被 编辑 的 。 单 击 国 
图 标 , 图 层 2 就 恢复 为 可 编辑 的 状态 。 


图 13-13 修改 图 层 名 称 和 隐藏 
图 层 内 容 
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如 果 要 删除 图 层 ,只 需 选中 图 层 , 然 后 单 击 “ 时 间 轴 ”面板 上 的 “删除 图 层 ” 按 钮 山 |。 如 
果 “ 时 间 轴 ”面板 上 只 剩 一 个 图 层 , 这 个 图 层 是 无 法 删除 的 ,这 时 ,只 能 先 新 建 一 个 图 层 , 再 把 
原 有 的 删除 。 

2. 创建 和 删除 帧 

右 击 “时 间 轴 ?面板 的 某 个 刻度 ,在 弹出 的 菜单 中 选择 “插入 帧 ”或 “插入 关键 帧 选项 , 那 
么 在 这 个 刻度 和 前 面 的 一 个 帧 之 间 都 将 产生 新 的 帧 。 也 可 以 使 用 快捷 方式 来 插入 帧 : 按 
F5 键 插入 非 关键 帧 , 按 F6 键 插 和 人 关键 帧 , 按 F7 键 插入 空白 关键 帧 。 

插入 帧 和 插入 关键 帧 的 区 别 是 : 前 者 产生 的 是 * 非 关键 帧 ”。 如 果 图 层 中 已 经 存在 某 
个 非 空白 的 帧 ,那么 添加 在 它 后 面 的 每 一 个 非 关 键 帧 都 将 复制 该 帧 的 内 容 , 并 且 当 修 改 
新 帧 的 内 容 时 ,前面 每 一 帧 的 内 容 都 会 全 部 跟着 改变 。 如 果 添 加 的 是 关键 帧 ,新 的 关键 
帧 也 将 复制 前 一 帧 的 内 容 , 不 同 的 是 ,修改 新 关键 帧 的 内 容 时 , 它 前 面 的 每 一 个 帧 都 不 会 
受到 影响 。 

在 时 间 轴 上 添加 的 所 有 帧 ,默认 情况 下 是 从 左 往 右 按 顺序 播放 的 。 

如 果 要 删除 帧 ,只 需 右 击 帧 ,在 弹出 菜单 中 选择 * 删 除 帧 选项 。 如 果 要 删除 多 个 帧 ,可 
以 先 选择 第 一 个 帧 ,然后 按 住 Shift 键 ,再 选择 最 后 一 个 帧 ,这 样 就 可 以 把 多 个 帧 同时 选中 ， 
再 通过 前 面 介 绍 的 方式 把 帧 删除 。 

【案例 演示 13-2】 制作 一 个 简单 的 Flash 
作品 ,显示 文字 由 小 变 大 ,图 13-14 显示 该 作品 中 
文字 变换 过 程 中 的 四 种 状态 。 

(1) 运行 Flash, 新 建 一 个 ActionScript 3.0 
的 文档 ,保存 为 sample2. fla。 

(2) 单 击 工具 面板 上 的 “选择 ”工具 ,在 


Flash 舞台 的 外 面 单 击 ,在 属性 面板 上 设置 舞台 

的 背景 色 为 # 990000, 设 置 大 小 为 300 X 200 

你。 示例 力 
(3) 选择 “文本 工具 ”, 在 属性 面板 上 设置 文 

本 属性 为 华文 云彩 、 大 小 为 20、 颜 色 为 白色 ,然后 示例 9) 

在 舞台 上 输入 “Flash 示例 2”。 


(4) 单 击 属性 面板 左 侧 的 “对 齐 ” 按 钮 区 ， 大 和 二 类 
在 “对 齐 ” 面 板 中 把 “与 舞台 对 齐 ” 选 中 ,然后 单 击 | 
对 齐 中 的 “水 平 对齐 ” 按 钮 齐 和 “垂直 对 齐 ” 按 钮 对 |. 
(5) 在 “时 间 轴 ”面板 的 图 层 1 上 ,在 第 10 帧 的 位 置 右 击 ,选择 “插入 关键 帧 "选项 ， 


选择 舞台 中 的 “Flash 示例 2 文本 块 ,改变 它 的 大 小 为 30, 并 设置 它 在 舞台 的 中 间 


骂 了 迅 


(6) 在 图 层 1 第 20 帧 的 位 置 上 ,插入 关键 帧 ,改变 文本 块 的 大 小 为 40 ,并 设置 它 在 舞台 
的 中 间 位 置 ; 在 第 30 帧 的 位 置 插入 关键 帧 ,改变 文本 块 的 大 小 为 50, 并 设置 它 在 舞台 的 中 
间 位 置 ; 在 第 40 帧 的 位 置 插入 帧 。 

(7) 保存 文档 , 按 Ctrl 十 Enter 键 ,测试 影片 。 
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内 容 : 制作 一 个 Flash 作品 ,要 求 展示 白色 文本 块 “start” 的 变化 过 程 ,效果 如 图 13-15 
所 示 , 一 共有 5 个 关键 状态 ,在 这 5 个 状态 中 ,分 别 改变 5 个 字符 的 颜色 为 黑色 。 要 求 把 
Flash 文档 保存 为 start. fla。 


图 13-15 Flash 案例 : start 的 颜色 变化 


13.3 ”对象 的 渐变 


在 上 述 例子 中 ,动画 中 的 变化 过 程 是 突然 发 生 的 ,并 没有 一 个 渐变 的 过 程 。 而 事实 上 ， 
更 多 的 动画 展示 的 是 一 个 渐变 的 过 程 , 所 以 需要 掌握 对 象 渐 变 ” 的 制作 方法 。 在 Flash 中 ， 
与 “渐变 ”关系 密切 的 一 个 概念 是 “ 补 间 ”, 所 以 首先 来 了 解 补 间 的 概念 。 


13.3.1 补 间 


1. 补 间 的 概念 

补 间 是 两 个 关键 状态 之 间 的 一 个 变化 过 程 。 如 果 在 两 个 关键 帧 之 间 插 入 补 间 ,那么 两 
个 关键 帧 之 间 的 变化 就 是 “渐变 ”的 。 

补 间 又 包含 补 间 形状 和 传统 补 间 。 补 间 形 状 主要 应 用 于 图 形 的 变化 ,而 传统 补 间 主 要 
应 用 于 元 件 的 变化 。 元 件 的 概念 将 在 后 面 介绍 。 

2. 创建 补 间 

在 “时 间 ? 轴 面板 上 , 右 击 两 个 关键 帧 之 间 的 任何 一 个 帧 ,在 弹出 菜单 中 选择 “创建 补 间 
形状 ?或 “创建 传统 补 间 ?选项 ,就 可 以 完成 补 间 的 创建 。 或 者 左 击 两 个 关键 帧 之 间 的 任何 一 
个 帧 ,然后 选择 “插入 ”一 “ 补 间 形 状 ” 或 “传统 补 间 ” 命 令 , 也 可 以 完成 补 间 的 创建 。 

当 两 个 关键 巾 之 间 插 入 了 补 间 , 就 会 出 现 一 个 水 二 
平方 向 的 箭头 符号 ,代表 一 个 补 间 。 如 图 13-16 所 a 
示 。 插入 补 间 形状 之 后 ,相关 的 帧 会 变 成 绿色 ; 插入 ey 5 
传统 补 间 之 后 ,相关 的 帧 变 成 浅 蓝 色 。 

注意 ,如 果 两 个 关键 帧 包含 的 对 象 不 是 元 件 ,但 
是 却 插入 “传统 补 间 ”, 那 么 关键 帧 包含 的 对 象 将 被 自动 转换 成 元 件 ,同时 被 放 入 * 库 ?面板 。 

3. 删除 补 间 

右 击 两 个 关键 帧 之 间 的 任何 一 个 帧 ,在 弹出 菜单 中 选择 “删除 补 间 ? 选 项 ,代表 补 间 的 箭 
头 符号 就 会 消失 ,表示 补 间 被 删除 。 

【案例 演示 13-3】 制作 一 个 圆 由 小 变 大 的 Flash 动画 。 

(1) 运行 Flash, 新 建 一 个 Flash 文档 ,保存 为 sample3. fla。 

(2) 单 击 “矩形 ?工具 右 下 角 的 黑色 小 三 角形 ,在 弹出 的 列表 中 选择 “椭圆 "工具 @., 然 
后 按 Shift 键 ,同时 在 舞台 上 拖 动 画 出 一 个 圆 形 。 


图 13-16 补 间 
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(3) 双击 这 个 圆 形 ( 这 样 才能 同时 把 圆 的 内 部 和 边缘 同时 选中 ), 单 击 工具 面板 上 的 任 
意 变形 工具 ,然后 按 Shift 键 , 同 时 拖 动 圆 ,把 圆 调整 到 比较 小 的 状态 。 

(4) 使 用 对齐? 面板 ,把 圆 调整 到 舞台 的 中 央 。 

(5) 在 图 层 中 第 40 帧 的 位 置 ,插入 关键 帧 ,并 改变 关键 帧 中 圆 的 大 小 ,把 它 变 得 更 大 一 些 。 

(6) 在 两 个 关键 帧 之 间 插 入 补 间 形 状 。 

(7) 保存 Flash 文档 ,测试 影片 ,查看 效果 。 


13.3.2 元 件 


1. 元 件 的 概念 

在 Flash 动画 制作 中 ,元 件 是 一 个 重要 的 概念 , 它 分 为 图 形 元 件 、 影 片 剪 辑 元 件 和 按钮 
元 件 。 元 件 的 特点 是 可 以 被 重复 利用 。 当 一 个 元 件 被 创建 出 来 之 后 , 它 会 被 放 入 “ 库 ” 中 ; 
当 需 要 使 用 该 元 件 的 时 候 ,只 须 从 库 中 拖 出 它 ,元件 就 会 被 复制 一 份 并 出 现在 舞台 上 。 从 元 
件 的 特点 来 看 ,元 件 可 以 看 做 是 一 个 模型 ,而 从 库 中 拖 动 到 舞台 上 的 可 以 看 做 是 按照 这 个 模 
型 生产 出 来 的 一 个 实物 , 称 之 为 “实例 ”。 

(1) 图 形 元 件 : 图 形 元 件 主要 用 于 制作 静态 的 对 象 , 比 如 森林 中 的 一 棵 树 。 

(2) 影片 剪辑 元 件 : 影片 剪辑 元 件 主要 用 于 制作 一 段 独立 的 小 动画 ,这 个 动画 的 实例 
只 需要 一 个 帧 来 存放 。 

(3) 按钮 元 件 : 按钮 元 件 主要 用 于 制作 响应 鼠标 事件 的 交互 式 按钮 ,比如 当 单 击 的 时 
候 可 以 进入 主页 的 按钮 。 制 作 交 互 式 按钮 一 般 需 要 配合 使 用 脚本 语言 。 

2. 创建 元 件 

创建 元 件 有 两 种 方式 : 

(1) 单 击 “ 插 入 ”菜单 ,选择 “新 建 元 件 " 菜 单项 ,弹出 图 13-17 所 示 的 对 话 框 ,输入 名 称 ， 
选择 “类 型 ”, 然 后 单 击 “ 确 定 ” 按 钮 。 

(2) 选择 Flash 舞台 上 的 某 个 对 象 , 右 击 ,在 弹出 菜单 中 选择 “转换 为 元 件 ” 选 项 ,同样 
会 弹出 图 13-17 所 示 的 对 话 框 。 


SEE | 


大型 (7: | 图形 | 取消 
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13-17 ”创建 新 元 件 


如 果 是 通过 方式 一 创建 元 件 ,创建 之 后 会 进入 元 件 的 编辑 界面 。 元 件 编辑 界面 不 同 于 
场景 编辑 界面 。 

什么 是 场景 呢 ? 一 个 场景 就 像 多 幕 剧 里 面 的 一 幕 。 一 个 Flash 作品 中 ,可 以 制作 多 个 
场景 ,并 通过 某 些 方式 来 安排 场景 的 播放 顺序 。 一 般 创 建 了 Flash 文档 之 后 ,会 默认 进入 场 
景 1 的 编辑 界面 。 可 以 通过 选择 * 搬 人 ”菜单 中 的 “场景 ?菜单 项 ,来 新 建 场景 ; 通过 “视图 ” 
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菜单 中 的 “ 转 到 ”菜单 项 ,来 选择 要 编辑 的 场景 。 

而 元 件 是 属于 场景 中 的 一 个 内 容 , 它 们 属于 嵌 套 的 关系 。 如 果 把 场景 编辑 界面 当做 第 
一 层 ,那么 元 件 编辑 界面 就 是 场景 中 的 第 二 层 , 所 以 当 处 于 元 件 编辑 界面 中 时 ,会 看 到 在 
Flash 舞台 左上 方 的 文档 名 字 标 签 下 ,显示 如 图 13-18 所 示 的 信息 。 单 击 “ 场 景 1”, 便 能 退 
出 元 件 编辑 , 回 到 场景 编辑 界面 。 

如 果 是 通过 方式 二 创建 元 件 , 那 么 要 双击 转换 后 生成 的 元 件 , 才 能 进入 元 件 的 编辑 
界面 。 

3. 库 

元 件 创建 之 后 ,会 被 放 入 “ 库 ”。 单 击 “ 窗 口 ”菜单 , 选 择 “ 库 ”菜单 项 ,就 可 以 打开 “ 库 ” 面 
板 , 如 图 13-19 所 示 。 


王 个 项 中 Dp 
E33 ET 
[一 场景 1 外 元 件 2 | 固 元 #1 
图 13-18 场景 和 元 件 编辑 界面 的 转换 图 13-19 库 面板 


在 * 库 ”面板 中 ,第 一 行 显示 的 是 当前 正在 编辑 的 Flash 文档 的 名 字 , 通 过 单 击 右 侧 
的 更 | 图 标 ,可 以 弹出 一 个 下 拉 列 表 , 在 列表 中 会 显示 目前 所 有 被 打开 的 Flash 文档 的 名 
字 , 单 击 它们 可 以 切换 查看 不 同文 档 中 的 元 件 。 

“ 库 ? 面 板 的 第 二 行 是 一 个 小 窗口 ,显示 当前 所 选 元 件 的 外 观 ,如 果 元 件 是 动态 的 ,在 这 
个 小 窗口 的 右上 角 还 会 显示 “停止 "和 “播放 ”图 标 : 男 喇 . 

在 “ 库 ” 面 板 中 ,“ 名 称 ” 两 个 字 下 面 列 出 的 是 当前 Flash 文档 包含 的 所 有 元 件 名 。 

在 * 库 ?面板 的 最 下 面 ,还 可 以 找到 两 个 按钮 : 网 和 加 |。 单 击 它们 分 别 可 以 新 建 一 个 
元 件 和 删除 一 个 元 件 。 

新 建 一 个 元 件 之 后 ,元件 只 是 被 放 入 了 “ 库 ” 面 板 , 没 有 出 现在 舞台 上 。 如 果 在 Flash 文 
档 的 舞台 上 需要 某 个 元 件 , 只 须 把 元 件 从 * 库 ?面板 中 拖 到 舞台 上 ,就 能 产生 一 个 元 件 的 实 
例 。 一 个 元 件 可 以 产生 多 个 实例 。 

【案例 演示 13-4】 制作 一 个 文字 由 白色 变 为 黑色 的 Flash 动画 。 

(1) 运行 Flash, 新建 一 个 Flash 文档 ,将 舞台 背景 设置 为 红色 ,保存 Flash 文档 为 
sample4. fla。 

(2) 选择 工具 面板 上 的 “文本 ”工具 ,在 舞台 上 输入 “Flash 示例 4”, 设 置 文字 大 小 为 50， 
颜色 为 白色 ,然后 使 用 “对 齐 ” 面 板 , 将 文字 放置 到 舞台 的 中 央 。 

(3) 将 文字 转换 为 元 件 , 命 名 为 “文本 块 ”, 并 设置 为 “图 形 ” 元 件 ,如 图 13-20 所 示 。 
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(4) 在 图 层 中 第 40 帧 的 位 置 ,插入 关键 帧 。 
(5) 选择 第 40 帧 中 的 文本 块 ,在 属性 面板 上 设置 色彩 效果 ,样式 ?选择 为 “色调 ,颜色 
设置 为 黑色 ,色调 ”设置 为 100% ,如 图 13-21 所 示 。 


号 色 考 就 果 
名 称 (N): [这 丰 瑞 样式 : [色调 1] | 
关 型 (D: [本 入 |] 对 f: 色 滑 : 一 [100 ]% 


红 : 全 一 |0 
绿 : [一 [5 
昔 : 0 一 [ 
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图 13-20 将 文本 转换 为 元 件 图 13-21 调整 色调 


(6) 在 两 个 关键 帧 之 间 插 人 传统 补 间 。 
(7) 保存 Flash 文档 , 按 Ctrl 十 Enter 键 ,测试 影片 ,查看 效果 。 
(8) 删除 补 间 ,测试 影片 ,对 比 在 步骤 (7) 中 看 到 的 效果 。 


< 任务 13.2 


内 容 : 制作 一 个 Flash 作品 ,实现 一 个 圆 球 直线 下 落 的 效果 ,要 求 把 Flash 文档 保存 为 
drop. fla 。 


13.4 基本 变化 类 型 


动画 的 变化 基本 上 由 各 种 对 象 的 变化 组 成 ,而 对 象 的 基本 变化 可 以 分 为 四 种 类 型 : 大 
小 变化 ,位 置 变 化 ,颜色 变化 、 形 状 变化 。 不 管 是 哪 一 种 变化 ,都 需要 区 分 变化 的 对 象 是 图 形 
还 是 元 件 , 如 果 非 图 形 也 非 元 件 , 那 么 可 以 将 对 象 转换 成 元 件 或 者 打 散 成 图 形 。 


13.4.1 大 小 的 变化 


制作 元 件 的 大 小 变化 ,基本 步骤 是 : 在 图 层 中 添加 一 个 关键 帧 ,然后 在 舞台 中 添加 一 个 
元 件 ; 再 到 图 层 中 添加 第 二 个 关键 帧 ,然后 改变 该 帧 元 件 的 大 小 ; 最 后 在 两 个 关键 帧 之 间 
插 和 人 传统 补 间 。 

制作 图 形 的 大 小 变化 ,基本 步骤 是 : 在 图 层 中 添加 一 个 关键 帧 ,然后 在 舞台 中 添加 一 个 
图 形 ; 再 到 图 层 中 添加 第 二 个 关键 帧 ,然后 改变 该 帧 图 形 的 大 小 ,最 后 在 两 个 关键 帧 之 间 捅 
入 补 间 形 状 。 

元 件 的 大 小 变化 和 图 形 的 大 小 变化 ,变化 的 重心 点 不 相同 ,变化 的 方向 也 就 不 同 。 如 果 
是 元 件 , 它 有 一 个 空心 的 圆圈 作为 “注册 点 ”, 注 册 点 在 哪里 ,变化 的 重心 点 就 在 哪里 。 选 中 
元 件 之 后 , 单 击 任意 变形 工具 ,可 以 移动 元 件 的 注册 点 。 如 果 是 图 形 , 对 它 进 行 大 小 变化 调 
整 时 ,调整 时 拖 动 的 方向 ,就 是 变化 的 方向 。 
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比如 ,绘制 一 个 圆 作为 元 件 , 它 的 注册 点 默认 位 置 是 圆心 ,通过 任意 变形 工具 ,把 注册 点 
挪动 到 圆 的 左下 角 ,那么 这 个 元 件 实例 从 小 变 到 大 的 时 候 ,将 以 左下 角 为 重心 点 向 右上 方 放 
大 ,如 图 13-22 所 示 。 


图 13-22 元件 的 注册 点 可 移动 


再 比如 ,绘制 一 个 圆 ,通过 任意 变形 工具 , 拖 动 圆 的 右 下 角 使 它 变 大 ,那么 这 个 圆 由 小 变 
到 大 的 时 候 ,将 以 左上 角 为 重心 点 向 右 下 方 放大 。 


13.4.2 位 置 的 变化 


制作 元 件 的 位 置 变化 ,基本 步骤 是 : 在 图 层 中 添加 一 个 关键 帧 ,然后 在 舞台 中 添加 一 个 
元 件 ; 再 到 图 层 中 添加 第 二 个 关键 帧 ,然后 改变 该 帧 元 件 的 位 置 ; 最 后 在 两 个 关键 帧 之 间 
插入 传统 补 间 。 

制作 图 形 的 位 置 变化 ,基本 步骤 是 : 在 图 层 中 添加 一 个 关键 帧 ,然后 在 舞台 中 添加 一 个 
图 形 ; 再 到 图 层 中 添加 第 二 个 关键 帧 ,然后 改变 该 帧 图 形 的 位 置 ; 最 后 在 两 个 关键 帧 之 间 
插入 补 间 形 状 。 

在 改变 对 象 位 置 的 时 候 , 如 果 和 希望 对 象 是 垂直 下 落 或 者 是 水 平 向 右 移 动 的 ,可 以 通过 这 
样 的 方式 来 实现 : 按 住 Shift 键 , 同 时 按 下 移 箭头 或 右 移 箭头 。 如 果 和 希望 是 垂直 上 升 或 水 平 
向 左 移 动 ,操作 的 方式 相同 。 

不 过 ,有 时 候 对 象 发 生 的 位 置 变化 并 不 是 直线 的 ,而 是 曲线 的 变化 。 比 如 太阳 的 升 起 ， 
对 象 沿 着 一 条 抛物 线 运动 ,这 样 的 位 置 变化 方式 ,需要 “ 引 动 层 "来 帮助 实现 。 

【案例 演示 13-5】 制作 一 个 模拟 太阳 升 起 的 Flash 作品 。 

(1) 运行 Flash, 新建 一 个 Flash 文档 ,保存 为 sample5. fla, 把 舞台 背景 色 设 置 为 
#99CCFF。 

(2) 把 第 一 个 图 层 命名 为 “太阳 ”, 在 舞台 上 绘制 一 个 圆 ,选中 这 个 圆 ( 包 括 外 轮廓 
线条 ) ,然后 单 击 “ 颜 色 ” 工 具 按 钮 柄 .打开 “颜色 ”面板 ,设置 笔触 为 无 色 , 油 漆 桶 为 “ 径 
向 渐变 ” ,设置 左边 油漆 桶 颜色 为 # FF0000, 右 边 油漆 桶 颜色 为 # FFCC00, 如 图 13-23 
所 示 。 

(3) 把 圆 转 换 为 图 形 元 件 , 元 件 命 名 为 taiyang。 

(4) 右 击 “太阳 ? 层 , 在 弹出 菜单 中 选择 “添加 传统 运动 引导 层 ? 选 项 ,如 图 13-24 所 示 。 

(5) 选中 引导 层 的 第 1 帧 ,使 用 “钢笔 ”工具 绘制 一 条 抛物 线 , 如 图 13-25 所 示 ,然后 在 
第 50 帧 的 位 置 插入 关键 帧 。 
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图 13-23 调整 颜色 图 13-24 ”添加 传统 运动 引导 层 


图 13-25 使 用 “钢笔 ”工具 绘制 抛物 线 


(6) 在 “太阳 ” 层 中 第 50 帧 的 位 置 插入 关键 帧 。 选 中 第 1 帧 ,把 舞台 中 的 太阳 放置 到 抛 
物 线 的 起 点 ; 选中 第 50 帧 ,把 太阳 放置 到 抛物 线 的 终点 ,如 图 13-26 所 示 。 然 后 在 “太阳 ” 层 
的 两 个 关键 帧 之 间 创建 传统 补 间 。 


图 13-26 在 第 1 帧 和 第 50 帧 添加 太阳 元 件 


(7) 保存 文档 ,测试 影片 。 在 影片 中 ,抛物 线 只 是 引导 了 圆 的 运动 轨迹 ,并 没有 显示 
出 来 。 


13.4.3 颜色 的 变化 


制作 元 件 的 颜色 变化 ,基本 步骤 是 : 在 图 层 中 添加 一 个 关键 帧 ,然后 在 舞台 中 添加 一 个 
元 件 ; 再 到 图 层 中 添加 第 二 个 关键 帧 ,然后 选中 该 帧 的 元 件 , 在 属性 面板 上 设置 “色彩 效 
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果 ”, 可 选 值 有 亮度 、 色 调 、 高 级 或 者 Alpha, 分 别 可 以 设置 亮度 变化 色彩 变化 、 综 合 变 化 或 
者 透明 度 变化 ; 最 后 在 两 个 关键 帧 之 间 插 入 传统 补 间 。 
制作 图 形 的 颜色 变化 ,基本 步骤 是 : 在 图 层 中 添加 一 个 关键 帧 ,然后 在 舞台 中 添加 一 个 
图 形 ; 再 到 图 层 中 添加 第 二 个 关键 帧 ,然后 选中 该 帧 的 、aggs 
图 形 , 在 属性 面板 上 设置 “填充 和 笔触 ", 调 整 笔触 和 油 #t: Ee) 
漆 桶 的 颜色 ; 最 后 在 两 个 关键 帧 之 间 插 入 补 间 形 状 。 Ba 
A ] 
和 pha 


元 件 的 颜色 变化 比 图 形 的 颜色 变化 效果 更 多 样 化 
一 些 ,因为 它 除了 可 以 设置 色调 的 变化 ,还 可 以 设置 亮 
度 和 透明 度 的 变化 ,如 图 13-27 所 示 。 所 以 ,如 果 希 望 对 
象 发 生 亮度 或 透明 度 的 变化 ,应 该 把 它 转换 为 元 件 。 图 13-27 元 件 的 颜色 设置 菜单 


13.4.4 形状 的 变化 


制作 元 件 的 形状 变化 ,基本 步骤 是 : 在 图 层 中 添加 一 个 关键 帧 ,然后 在 舞台 中 添加 一 个 
元 件 ; 再 到 图 层 中 添加 第 二 个 关键 帧 ,然后 选中 该 帧 的 元 件 , 对 它 进行 任意 变形 ; 最 后 在 两 
个 关键 帧 之 间 插 入 传统 补 间 。 

制作 图 形 的 形状 变化 ,基本 步骤 是 : 在 图 层 中 添加 一 个 关键 帧 ,然后 在 舞台 中 添加 一 个 
图 形 ; 再 到 图 层 中 添加 第 二 个 关键 帧 ,然后 选中 该 帧 的 图 形 ,把 它 删除 ,再 添加 其 他 的 图 形 ; 
最 后 在 两 个 关键 帧 之 间 插 入 补 间 形 状 。 

图 形 的 形状 变化 效果 比 元 件 的 形状 变化 更 丰富 一 些 。 因 为 元 件 一 般 只 能 是 对 自身 进行 
任意 的 变形 ,变化 效果 受到 原 有 形状 的 限制 ; 而 图 形变 化 的 时 候 , 起 始 关键 帧 和 结束 关键 
帧 ,可 以 放置 完全 不 同 的 两 个 图 形 。 比 如 ,可 以 把 一 个 圆 形 ,通过 形状 变化 , 变 成 一 个 文本 图 
形 。 但 是 一 定 要 注意 ,创建 图 形 的 形状 变化 必须 确保 两 个 关键 帧 当中 放置 的 都 是 图 形 ,如 果 
不 是 图 形 的 ,必须 转变 成 图 形 。 

图 13-28 展示 的 是 一 个 圆 形变 成 文本 “ Welcome” 的 过 程 。 
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图 13-28 一 个 圆 形变 成 文本 的 过 程 


怎么 才能 把 一 个 对 象 转 成 图 形 呢 ?基本 操作 步骤 是 : 右 击 舞 台中 要 转变 的 对 象 ,在 弹 
出 菜单 中 选择 “分 离 ” 选 项 。 有 的 对 象 分 离 一 次 就 被 完全 打 散 成 图 形 , 有 的 对 象 可 能 要 分 离 
多 次 ,比如 文本 块 需要 分 离 两 次 才能 完全 被 打 散 。 判 断 对 象 是 否 已 经 被 完全 打 散 成 图 形 的 
方法 是 : 右 击 对 象 ,如 果 弹 出 菜单 中 找 不 到 “分 离 ” 选 项 ,说 明 对 象 已 经 转换 成 图 形 了 。 
图 13-29 展示 的 是 一 个 文本 通过 两 次 分 离 变 成 图 形 的 过 程 。 

【案例 演示 13-6】 制作 一 个 文本 由 透明 到 完全 显示 的 渐变 过 程 。 

(1) 运行 Flash ,新建 一 个 文档 ,保存 为 sample7. fla。 
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Wealecome 
eleome 
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(2) 选中 第 一 个 图 层 的 第 1 帧 ,在 舞台 上 输入 “Flash 示例 7”, 在 属性 面板 上 调整 文本 
的 大 小 和 颜色 ,并 把 文本 放置 在 舞台 中 央 , 然 后 把 文本 转换 为 图 形 元 件 。 

(3) 在 第 30 帧 的 位 置 插入 关键 帧 ,然后 选择 第 1 帧 的 文本 块 ,在 属性 面板 上 设置 “色彩 
效果 ”为 Alpha, 值 调整 为 0% 。 

(4) 在 两 个 关键 帧 之 间 创 建 传统 补 间 。 

(5) 保存 文档 ,测试 影片 。 

在 这 个 示例 中 ,如 果 文 本 不 是 被 转换 为 元 件 , 而 是 被 打 散 成 图 形 ,那么 就 无 法 找到 
Alpha 属性 ,因此 也 无 法 制作 透明 度 的 渐变 。 下 面 的 示例 , 则 需要 将 文本 打 散 成 图 形 ,因为 
要 求 文本 发 生 形变 。 可 见 ,将 一 个 对 象 进行 某 些 变化 的 时 候 ,要 判断 需要 的 是 元 件 还 是 图 
形 ,由 此 来 决定 对 象 的 转变 类 型 。 

【案例 演示 13-7】 制作 一 个 简单 的 Flash 作品 ,展示 文本 由 小 到 大 渐变 ,然后 变形 为 另 
外 一 个 文本 的 过 程 。 

(1) 运行 Flash ,新建 一 个 文档 ,保存 为 sample6. fla。 

(2) 选中 第 一 个 图 层 的 第 1 帧 ,在 舞台 上 输入 "Flash 示例 6”, 在 属性 面板 上 调整 文本 
的 大 小 和 颜色 ,并 把 文本 放置 在 舞台 中 央 。 

(3) 在 第 20 帧 的 位 置 插入 关键 帧 ,选中 第 20 帧 ,在 属性 面板 上 把 文本 调 大 一 些 , 然 后 
把 文本 的 位 置 调整 到 舞台 中 央 。 

(4) 因为 在 本 作品 中 ,要 求 文本 形变 为 另外 一 个 文本 ,所 以 该 文本 应 该 被 转换 成 图 形 ， 
分 别 对 第 1 帧 和 第 20 帧 的 “Flash 示例 6" 文 本 块 进 行 操作 ,分离 两 次 , 打 散 成 图 形 。 

(5) 在 两 个 关键 帧 之 间 创 建 补 间 形 状 。 保 存 文档 ,测试 影片 中 的 第 一 个 变化 过 程 。 

(6) 在 第 40 帧 的 位 置 插入 关键 帧 ,把 该 帧 的 文本 删除 ,重新 添加 文本 “文本 变形 ”, 设 置 
文本 的 大 小 和 颜色 ,并 把 它 放 到 舞台 的 中 央 , 然 后 把 该 文本 打 散 成 图 形 。 

(7) 在 第 20 帧 和 第 40 帧 之 间 创 建 补 间 形 状 ; 在 第 50 帧 的 位 置 插入 帧 ,以 便 延 长 第 45 
帧 的 显示 时 间 。 

(8) 保存 文档 ,测试 影片 的 完整 变化 过 程 , 图 13-30 展示 了 变化 的 过 程 。 
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从 该 示例 的 变化 过 程 可 以 发 现 , 当 文本 转变 成 图 形 后 ,从 小 到 大 的 变化 其 实 也 被 当成 了 
一 种 形变 ,所 以 变化 过 程 中 文字 的 外 形 会 受到 一 些 影响 。 


< 任务 13.3 


内 容 : 一 般 情况 下 ,完成 一 个 Flash 动画 ,要 先 设 计 好 效果 ,然后 才 进 行 制作 。 图 13-31 
展示 的 是 一 个 校园 网 站 导入 页 的 界面 设计 ,按照 该 设计 制作 一 个 Flash 动画 ,保存 Flash 文 
档 为 "导入 页 动画 1. fla”。 
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提示 : 

(1) Flash 文档 大 小 应 该 接近 一 个 网 页 的 大 小 ,比如 700 像素 X500 像素 。 

(2) 应 用 前 面 介绍 的 各 种 变化 方法 ,将 文本 块 做 成 动画 效果 。 

(3) 可 以 根据 实际 情况 ,改变 设计 中 的 文字 和 图 像 。 图 像 导 入 到 Flash 作品 中 的 步骤 
是 : 选择 “文件 ”导入 ”> 导入 到 舞台 ”命令 ,然后 选择 要 使 用 的 图 像 并 打开 ,图 像 就 出 现 
在 舞台 中 。 

(4) 不 同 的 对 象 ,应 该 使 用 不 同 的 图 层 。 


13.5 制作 Flash 导入 页 


13.5.1 网 站 导入 页 


网 站 导入 页 指 的 是 在 网 站 的 真正 主页 之 前 出 现 的 网 页 , 它 一 般 带 有 广告 或 宣传 的 性 质 
很 多 网 站 导入 页 都 设计 成 Flash 的 形式 ,在 这 里 称 之 为 eh 导入 页 ”。 一 般 情况 下 ,Flash 
导入 页 中 的 文本 很 少 ,一 般 只 有 网 站 名 称 和 一 些 宣传 口号 ,更 多 的 是 一 些 图 片 的 展示 ,并 附 
有 “进入 主页 ”或 “ 跳 过 动画 "之 类 的 按钮 。 一 个 好 的 Flash 导入 页 ,能 帮助 宣传 网 站 的 精神 、 
提升 网 站 的 形象 ,同时 加 深 用 户 对 网 站 的 印象 。 

图 13-32 展示 的 是 某 企业 网 站 的 导入 页 (http://luntaichina. com/)。 
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图 13-32 导入 页 示例 


注意 : 虽然 Flash 导入 页 能 提升 网 站 的 形象 ,并 且 可 能 给 用 户 留 下 美好 的 体验 感 ,但 是 
并 非 使 用 它 就 一 定 是 好 的 。 因 为 使 用 的 是 Flash 技术 ,网 络 上 的 搜索 引擎 一 般 无 法 检索 到 
导入 页 上 的 文本 信息 ,所 以 可 能 因此 降低 网 站 被 搜索 到 的 可 能 性 。 那 些 需要 依赖 网 络 搜索 
引擎 进行 网 络 营销 的 网 站 ,不 太 适 合 使 用 Flash 导入 页 。 
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所 以 ,Flash 导入 页 有 好 处 也 有 坏处 ,是 否 使 用 它 , 要 根据 网 站 的 营运 性 质 来 决定 。 
下 面 ,将 学 习 关于 遮 界 ,按钮 和 动作 的 应 用 ,并 使 用 这 些 技术 制作 Flash 导入 页 。 


13.5.2 遮 界 


遮 淖 是 Flash 中 的 一 个 重要 技术 ,使 用 它 可 以 创建 出 一 些 神奇 的 动画 效果 。 比 如 用 一 
个 图 形 填充 另外 一 个 图 形 ,如 图 13-33 所 示 ,文字 的 背景 图 通过 遮 单 技术 变 成 了 文字 的 填充 
样式 。 又 比如 ,一 些 灯光 扫射 文字 的 效果 ( 当 灯 光 射 到 时 ,文字 显示 ,否则 不 显示 ) ,也 是 应 用 
遮 黑 来 实现 的 。 遮 四 就 像 是 一 个 视窗 ,在 一 个 对 象 上 面 添加 了 遮 罩 之 后 ,被 遮 单 的 部 分 透 过 
遮 时 图 形 显现 出 来 ,而 没有 被 遮 罩 的 部 分 则 看 不 见 。 

遮 单 层 就 是 具有 遮 音 效果 的 特殊 图 层 。 可 以 在 遮 单 层 中 添加 任意 形状 的 对 象 ,比如 矩 
形 、 圆 形 文字 或 某 个 元 件 , 被 添加 到 遮 四 层 中 的 对 象 就 好 像 一 个 任意 形状 的 视窗 ,在 遮 音 层 
下 面 的 那个 图 层 中 ,对 象 将 透 过 该 “视窗 ”显示 出 来 ,而 “视窗 "之 外 的 对 象 将 被 隐藏 。 

遮 单 可 以 分 为 静态 遮 单 和 动态 遮 单 ,静态 遮 单 制作 的 是 一 些 静态 的 效果 ,主要 用 于 改变 
一 些 图 像 的 显示 形状 ; 动态 遮 单 制作 的 是 动态 的 效果 ,可 用 于 实现 对 象 出 现 或 消失 时 的 渐 

1. 静态 遮 单 

静态 遮 单 的 基本 制作 步 又: 创建 一 个 图 层 ,在 层 上 添加 任意 形状 的 图 形 ; 右 击 该 图 层 ， 
在 弹出 菜单 中 选择 * 遮 音 层 "选项 ,该 层 就 会 对 位 于 它 下 方 的 一 个 图 层 产 生 静 态 遮 单 的 效果 。 

【案例 演示 13-8】 制作 一 个 简单 的 Flash 作品 ,舞台 中 显示 一 张 风景 图 ,要 求 使 用 静态 
遮 单 ,让 风景 图 的 显示 效果 如 图 13-34 所 示 。 


图 13-33 遮 单 示例 1 图 13-34 ”和 遮 罩 示例 2 


(1) 运行 Flash, 新 建 一 个 文档 ,保存 为 sample8. fla。 

(2) 在 第 一 个 图 层 的 第 1 帧 中 ,导入 一 张 风景 图 。 

(3) 新 建 一 个 图 层 ,该 层 必 须 位 于 第 一 个 图 层 的 上 方 。 选 择 该 层 的 第 1 帧 ,使 用 “钢笔 ” 
工具 在 舞台 上 绘制 一 个 心 形 。 如 果 心 形 的 绘制 效果 和 图 13-35(a) 一 样 , 若 没有 填充 色 ,必须 
使 用 油漆 桶 工具 ,对 该 图 形 填充 任何 一 种 颜色 , 变 成 图 13-35(b) 的 样子 。 

(4) 右 击 心 形 所 在 的 图 层 , 在 弹出 菜单 中 选择 * 遮 单 层 ” 命 令 。 

(5) 保存 文档 ,测试 影片 ,查看 效果 。 
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图 13-35 ” 遮 罩 层 的 图 形 需 要 填充 


在 上 面 的 例子 中 ,如 果 心 形 没有 填充 ,那么 就 好 像 遮 单 这 个 “视窗 "没有 打开 ,所 以 遮 单 
层 产 生 之 后 ,并 不 能 看 到 风景 透 过 心 形 显示 出 来 的 效果 。 

注意 : 选单 层 中 应 用 的 对 象 必须 是 图 形 , 和 否则 不 能 产生 遮 音 的 效果 。 在 下 面 的 例子 中 ， 
遮 单 层 添 加 的 是 文字 ,文字 并 不 是 图 形 ,所 以 必须 把 文字 打 散 成 图 形 之 后 ,才能 产生 遮 章 
效果 。 

【案例 演示 13-9】 制作 一 个 简单 的 Flash 作品 ,实现 如 图 13-33 所 示 的 效果 。 

(1) 运行 Flash ,新 建 一 个 文档 ,保存 为 sample9. fla。 

(2) 修改 第 一 个 图 层 的 名 字 为 “风景 层 ”, 在 第 一 个 图 层 
的 第 1 帧 导入 风景 图 。 

(3) 新 建 一 个 图 层 ,命名 为 “文字 层 ”, 如 图 13-36 所 示 ， 
选择 该 层 的 第 1 帧 ,使 用 "文本 ”工具 输入 "文字 ?两 字 。 

(4) 选择 "文字 ”, 右 击 , 在 弹出 菜单 中 选择 “分 离 选 项 ， 
然后 再 进行 第 二 次 分 离 ,将 文字 完全 打 散 成 一 个 图 形 , 如 图 13-37 所 示 。 


图 13-36 示例 中 的 两 个 图 层 


图 13-37 将 文字 打 散 成 图 形 


(5) 右 击 图 层 “ 文 字 层 ”, 在 弹出 菜单 中 选择 “ 遮 单 层 " 选 项 。 

(6) 保存 文档 ,测试 影片 ,查看 效果 。 

2. 动态 遮 章 

动态 遮 淖 的 基本 制作 步骤 是 : 创建 一 个 图 层 ,在 层 上 创建 任意 的 动画 效果 ; 右 击 该 图 


层 , 在 弹出 菜单 中 选择 “ 遮 单 层 ” 选 项 ,该 层 就 会 对 
位 于 它 下 方 的 那个 图 层 产 生动 态 遮 音 的 效果 。 
【案例 演示 13-10】 制作 一 个 简单 的 Flash 作 


图 13-38 Flash 案例 ; 模拟 灯光 扫射 品 ,模拟 灯光 扫射 的 效果 ,如 图 13-38 所 示 。 
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(1) 运行 Flash ,新 建 一 个 文档 ,保存 为 samplel0. fla ,把 舞台 背景 设置 为 黑色 。 

(2) 把 第 一 个 图 层 命名 为 “文字 层 ”, 在 该 层 第 1 帧 输入 “等 待 灯 光 的 文字 ”, 在 第 30 帧 
的 位 置 插入 关键 帧 。 

(3) 新 建 一 个 图 层 , 命 名 为 “灯光 层 ”, 该 层 必须 位 于 “文字 层 ”" 的 上 方 。 在 该 层 的 第 1 帧 
添加 一 个 圆 形 , 将 圆 形 的 位 置 放 到 “等 待 灯 光 的 文字 ”的 左 侧 ,如 图 13-39 所 示 。 

(4) 在 灯光 层 的 第 30 帧 位 置 插入 关键 帧 ,并 选中 该 帧 ,调整 圆 形 的 位 置 到 “等 待 灯光 的 
文字 ”的 右 侧 , 如 图 13-40 所 示 。 


等 待 灯 光 的 文字 等 待 灯光 的 文字 


图 13-39 圆 形 的 起 始 位 置 图 13-40 圆 形 的 结束 位 置 
(5) 在 灯光 层 创 建 补 间 形 状 ,然后 将 灯光 层 设 置 为 遮 单 层 。 


(6) 保存 文档 ,测试 影片 。 

在 上 面 的 例子 中 , 遮 单 层 使 用 了 一 个 圆 形 ,该 圆 作为 一 个 “视窗 ?进行 着 水 平 位 移 , 它 移 
动 到 哪里 ,哪里 的 内 容 就 透 过 它 显 示 出 来 ,而 移 过 之 后 ,内 容 又 会 看 不 见 。 所 以 就 看 到 了 文 
字 逐 个 显示 又 随即 消失 的 效果 。 

【案例 演示 13-11】 制作 文字 展开 式 显示 的 效果 ,如 图 13-41 所 示 。 

(1) 运行 Flash ,新 建 一 个 文档 ,保存 为 oO fla ,把 舞台 背景 t 


(2) 把 第 一 个 图 层 命名 为 “文字 层 ”, 在 该 层 第 1 帧 输入 “展开 的 文字 ” ,在 第 30 0 帧 的 位 
置 插入 关键 帧 。 


(3) 新 建 一 个 图 层 , 命 名 为 “展开 层 ”, 该 层 必须 位 于 “文字 层 ” 的 上 方 。 在 该 层 的 第 1 帧 
添加 一 个 矩形 ,将 矩形 的 位 置 放 到 “展开 的 文字 ”的 左 侧 ,如 图 13-42 所 示 。 


图 13-41 Flash 案例 : 文字 图 13-42 矩形 的 起 始 位 置 
展开 式 显示 


(4) 在 展开 层 的 第 30 帧 位 置 插 和 人 关键 帧 ,并 选中 该 帧 ,向 右 拖 动 矩形 调整 大 小 ,直至 矩 
形 完全 覆盖 “展开 的 文字 ”, 如 图 13-43 所 示 。 

(5) 在 展开 层 创 建 补 间 形 状 ,然后 将 展开 展 设置 为 遮 单 层 。 

(6) 保存 文档 ,测试 影片 。 

在 上 面 的 示例 中 , 遮 罩 层 使 用 了 一 个 由 小 变 大 的 矩形 ,好像 一 个 由 小 变 大 的 窗口 。 最 开 
始 的 时 候 ,矩形 位 于 文本 块 的 左 侧 有 对 太 直 全 的 条 村 从 和 法 兴 , 所 四 奖杯 订 各 及 
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13-43 ”矩形 的 结束 状态 


到 的 ; 随 着 抢 形 变 大 , 遮 音 的 窗口 慢 慢 变 大 ,渐渐 地 把 文本 块 从 左 往 右 地 显示 出 来 ,所 以 就 
看 到 了 文本 从 左 往 右 慢 慢 展开 的 效果 。 


< 任务 13.4 


内 容 : 制作 一 个 Flash 作品 ,展示 文本 块 *“ 欢 迎 您 光临 本 网 站 ”从 中 间 向 左右 两 边 渐渐 
展开 的 过 程 , 把 Flash 文档 保存 为 welcome. fla。 


13.5.3 按钮 


在 前 面 的 章节 ,介绍 过 元 件 的 分 类 ,其 中 图 形 元 件 在 一 些 示 例 中 已 经 使 用 过 了 ,接着 ,要 
使 用 按钮 元 件 和 影片 剪辑 元 件 来 制作 动画 按钮 。 

1. 按钮 元 件 

按钮 元 件 主要 用 于 制作 交换 式 按钮 ,比如 当 光 标 指向 按钮 的 时 候 , 按 钮 的 样式 会 发 生变 
化 或 者 当 单 击 按钮 的 时 候 , 会 弹出 一 个 网 页 。 

创建 和 使 用 按钮 元 件 的 基本 步 又 如 下 。 

(1) 选择 "插入 ”> 新建 元 件 ” 命 令 ,在 “创建 新 元 件 ” 对 话 框 中 选择 类 型 为 “按钮 ”并 输 
入 名 称 , 单 击 “ 确 定 ” 按 钮 之 后 ,将 进入 按钮 元 件 的 编辑 界面 。 

(2) 在 按钮 的 编辑 界面 中 ,制作 按钮 的 各 种 状态 ,然后 退出 按钮 编辑 , 回 到 场景 编辑 界面 。 

(3) 打开 * 库 ?面板 ,从 库 中 把 刚刚 创建 的 按钮 元 件 拖 出 , 放 到 舞台 上 ,按钮 实例 就 被 添 
加 到 Flash 文档 中 了 。 

在 按钮 元 件 的 编辑 界面 中 ,“ 时 间 轴 ”面板 与 平时 不 太一 样 ,如 图 13-44 所 示 , 这 时 它 的 
每 一 个 图 层 只 有 4 个 帧 : 弹 起 、 指 针 经 过 、 按 下 、 点 击 。 这 4 个 帧 分 别 用 来 制作 按钮 最 开始 
的 状态 、 指 计 经 过 时 的 状态 ,被 按 下 时 的 状态 ,被单 击 的 状态 。 最 初 的 时 候 ,只 有 “ 弹 起 ”状态 
有 一 个 空白 的 关键 帧 ,其 他 的 状态 下 都 没有 添加 任何 帧 ,需要 制作 的 时 候 手动 添加 。 为 了 编 
辑 每 一 个 状态 的 时 候 , 互 不 影响 ,应 该 为 它们 都 添加 关键 帧 。 

【案例 演示 13-12】 制作 显示 一 个 按钮 的 Flash 作品 ,要 求 按钮 的 初始 状态 如 图 13-45 
所 示 , 当 指针 经 过 按钮 和 按 住 按钮 的 时 候 .文字 和 按钮 颜色 都 会 发 生 不 同 的 变化 。 


1 
Sa a - 按 下 点 击 
中 图 慌 1  / 。 。 日 < 
13-44 ”按钮 元 件 的 四 个 状态 帧 13-45 ”Flash 案例 :“ 开 始 


播放 ”按钮 
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(1) 运行 Flash ,新 建 一 个 文档 ,保存 为 sample12. fla。 

(2) 选择 “插入 ”>“ 新 建 元 件 "命令 ,选择 类型" 为“ 按钮", 输入 名 称 “播放 按钮 ”, 单 击 
“确定 ”按钮 。 

(3) 在 按钮 元 件 的 编辑 界面 中 ,修改 当前 图 层 的 名 字 为 “椭圆 层 ”, 选 中 该 层 的 “ 弹 
起 ” 帧 ,然后 绘制 一 个 椭圆 形 , 把 它 放 置 在 界面 的 中 央 , 设 置 它 的 填充 颜色 为 红 黑 径 向 

(4) 在 按钮 元 件 的 编辑 界面 中 ,创建 一 个 新 的 图 层 , 命 名 为 “文本 层 ”。 

(5) 选中 文本 层 的 “ 弹 起 ” 帧 ,如 图 13-46 所 示 , 在 椭圆 上 输入 文字 “开始 播放 ”, 设 置 文 
字 的 字体 、 大 小 和 颜色 ,并 把 文字 放置 在 界面 的 中 央 。 

(6) 右 击 椭圆 层 中 “指针 经 过 ” 帧 的 位 置 ,插入 关键 帧 ,前 一 帧 的 椭圆 形 即 被 复制 到 当前 
帧 中 。 选 中 该 帧 的 椭圆 形 , 打 开 “ 颜 色 ” 面 板 , 把 径 向 渐变 中 第 一 个 油漆 桶 从 左边 移动 到 中 间 
的 位 置 ,如 图 13-47 所 示 。 


[F000 A: 100% 


图 13-46 ” 弹 起 状态 需要 两 个 图 层 图 13-47 调整 椭圆 形 的 颜色 


(7) 右 击 梢 圆 层 中 * 按 下 ” 帧 的 位 置 ,插入 关键 帧 ,前 一 帧 的 椭圆 形 即 被 复制 到 当前 帧 
中 。 选 中 该 帧 的 椭圆 形 ,打开 “颜色 ”面板 ,把 径 向 渐变 中 第 一 个 油漆 桶 的 颜色 改 为 暗 
红色 。 

(8) 种 击 文本 层 中 * 指 针 经 过 "由 的 位 置 ,插入 关键 帧 ,前 一 帧 的 文本 即 被 复制 到 当前 由 
中 。 选 中 该 帧 的 文本 块 ,将 文本 调 大 一 号 。 

(9) 右 击 文本 层 中 * 按 下 ” 帧 的 位 置 ,插入 关键 
由 ,前 一 标的 文本 即 被 复制 到 当前 着 中. 选中 该 村 > 《ED 《ED 
的 文本 块 ,将 文本 调 为 暗 一 点 的 颜色 。 图 13-48 从 图 13-48 弹 起 .指针 经 过 , 按 下 3 个 状态 
左 到 右 分 别 展示 了 弹 起 .指针 经 过 、 按 下 3 个 状态 。 

(10) 退出 按钮 元 件 的 编辑 界面 , 回 到 场景 1。 打开 “ 库 "面板 ,把 “播放 按钮 "从 库 中 拖 
出 , 放 到 舞台 上 。 

(11) 保存 文档 ,测试 影片 。 光 标 移动 到 按钮 上 或 按 住 时 ,按钮 将 发 生 不 同 的 变化 。 

在 上 面 的 示例 中 ,只 制作 了 按钮 的 弹 起 、 指 针 经 过 、 按 下 3 个 状态 。 在 一 般 情 况 下 ， 
“点 击 ”状态 是 不 易 被 察觉 的 ,所 以 应 用 比较 少 。 按 钮 中 包含 的 各 个 帧 ,并 不 像 普通 场景 
中 的 帧 那样 , 按 顺 序 播放 , 它 只 是 在 被 触发 的 时 候 才 播放 。 比 如 “指针 经 过 ” 帧 ,只 有 当 光 
标 移动 到 按钮 上 的 时 候 , 这 个 帧 才 被 触发 ; 而 “ 按 下 ” 帧 ,只 有 当 按 下 按钮 的 时 候 , 才 被 角 
发 。 所 以 , 当 光 标 不 触 碰 按钮 的 时 候 ,按钮 显示 原始 的 状态 ,也 就 是 “ 弹 起 ” 帧 中 的 状态 ; 
当 光 标 移 到 按钮 上 或 按 住 按钮 时 ,按钮 显示 “指针 经 过 ” 帧 或 “ 按 下 ” 帧 的 状态 ,就 看 到 了 
按钮 发 生 的 变化 。 

2. 影片 剪辑 元 件 

前 面 说 过 ,影片 剪辑 元 件 主要 用 于 制作 一 段 独 立 的 小 动画 , 它 的 实例 只 需要 用 一 个 帧 来 
存放 ,暂且 把 这 个 帧 叫做 “影片 剪辑 帧 "。 当 影片 剪辑 帧 被 激活 的 时 候 , 影 片 剪 辑 就 会 开始 播 
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放 ; 反之 ,影片 前 辑 中 的 动画 就 会 隐藏 起 来 。 
创建 并 使 用 影片 剪辑 元 件 的 步骤 如 下 。 
(1) 选择 “插入 ”一 “新 建 元 件 ” 命 令 ,在 “创建 新 元 件 ” 对 话 框 中 选择 类 型 为 “影片 剪辑 ”， 
并 输入 名 称 , 单 击 “ 确 定 ” 按 钮 之 后 ,将 进入 影片 剪辑 元 件 的 编辑 界面 。 
(2) 在 影片 剪辑 元 件 中 创建 动画 效果 ,然后 退出 元 件 编辑 界面 , 回 到 场景 编辑 界面 。 
(3) 打开 * 库 ?面板 ,从 库 中 把 刚刚 创建 的 影片 剪辑 元 件 拖 出 , 放 到 舞台 上 ,影片 剪辑 实 
例 就 被 添加 到 Flash 文档 中 了 。 
从 上 面 的 步骤 可 知 ,舞台 上 只 用 一 个 帧 存放 影片 剪辑 元 件 的 实例 。 当 Flash 作品 播放 
到 影片 剪辑 帧 的 时 候 , 该 帧 被 激活 ,影片 剪辑 就 被 触发 并 开始 播放 。 如 果 播 放 到 影片 剪辑 帧 
之 后 停 住 ,就 可 以 看 到 完整 播放 的 影片 剪辑 ; 否则 ,只 能 看 到 影片 剪辑 一 闪 而 过 。 
【案例 演示 13-13】 制作 只 带 一 个 帧 的 Flash 作品 ， 
要 求 作品 播放 的 时 候 ,显示 一 个 圆 由 小 到 大 ,由 透明 到 
不 透明 的 渐变 过 程 。 圆 的 外 观 如 图 13-49 所 示 。 
(1) 运行 Flash, 新 建 一 个 文档 ,保存 为 samplel3. fla。 
(2) 选择 “插入 ”一 “新 建 元 件 ” 命 令 , 在 “创建 新 元 十 
件 ? 对 话 框 中 选择 类 型 为 "影片 剪辑 ”, 并 输入 名 称 * 放 射 
的 圆 ”, 单 击 “ 确 定 ” 按 钮 。 
(3) 在 影片 剪辑 元 件 的 编辑 界面 中 ,绘制 一 个 正 圆 
形 ,把 它 放置 到 界面 的 中 央 。 选 中 圆 , 打 开 * 颜 色 ” 工 具 


盘 ,设置 圆 的 填充 效果 ,如 图 13-50 所 示 。 图 13-49 Flash 案例 : 圆 的 
(4) 选中 这 个 圆 ,转换 为 图 形 元 件 ,并 将 元 件 命 名 放射 变化 
为 * 圆 ”。 


(5) 选中 “放射 的 圆 ”中 的 第 1 帧 ,把 圆 的 Alpha 值 设置 为 0, 如 图 13-51 所 示 。 


上 了 |[ | [ 绒 洒 到 | 

流 : a 

风口 怠 口 线性 R66 
On: 9° 
Os: o% 
OB8: 100% 


@R 255 
OG:255 


Oa: 255 号 色 才 区 果 
[EFFFFF A: 100% 


st: [pm l=] 
: | Apha 0 一 一 0]% 


图 13-50 设置 圆 的 颜色 图 13-51 调整 圆 的 透明 度 
填充 效果 


(6) 在 “放射 的 圆 ” 的 编辑 界面 中 , 右 击 第 40 帧 的 位 置 ,插入 关键 帧 ,然后 选中 该 帧 当中 
的 圆 ,把 它 的 Alpha 值 设置 为 100% ,并 且 把 圆 变 大 。 
(7) 在 第 1 帧 和 第 40 帧 之 间 创 建 传统 补 间 。 
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(8) 退出 影片 剪辑 的 编辑 , 回 到 场景 1]。 打 开 “ 库 ”面板 ,把 “放射 的 圆 " 从 库 中 拖 出 , 放 到 
舞台 上 。 

(9) 保存 文档 ,测试 影片 。 

在 这 个 例子 中 ,使 用 了 图 形 元 件 和 影片 剪辑 元 件 , 其 中 图 形 元 件 * 圆 ?应 用 在 了 影片 剪辑 
“放射 的 圆 ? 当 中 ,而 “放射 的 圆 ? 又 被 应 用 在 了 场景 1 当中 。 在 步骤 (4) 中 ,为 什么 要 将 圆 形 
转换 成 元 件 呢 ? 因为 本 例 要 求 对 圆 的 透明 度 进行 改变 ,只 有 元 件 才 有 Alpha 属性 ,所 以 就 
需要 把 圆 形 转换 成 元 件 。 

下 面 的 这 个 例子 ,将 把 影片 剪辑 和 按钮 元 件 应 用 到 一 起 来 制作 按钮 。 

【案例 演示 13-14】 制作 一 个 Flash 作品 ,显示 一 个 按钮 。 要 求 当 鼠标 指针 移动 到 按钮 
上 时 ,按钮 会 播放 放射 的 圆 , 当 按 住 鼠 标 左 键 时 , 圆 的 外 观 也 会 发 生变 化 。 按 钮 的 弹 起 、 指 针 
经 过 和 按 下 3 个 状态 分 别 如 图 13-52 中 的 3 个 图 所 示 。 


进入 坟 页 be 进入 性 页 


图 13-52 Flash 案例 : 进入 主页 按钮 


(1) 运行 Flash ,新建 一 个 文档 ,保存 为 samplel4. fla。 

(2) 在 Flash 中 打开 samplel3. fla。 

(3) 切换 到 smaplel4. fla 的 编辑 窗口 。 选 择 “ 插 入 ”一 “新 建 元 件 ” 命 令 , 在 “创建 新 元 
件 ” 对 话 框 中 ,选择 “类 型 "为 “按钮 ”, 输 入 名 称 * 进 入 主页 按钮 ”, 单 击 “ 确 定 ” 按 钮 。 

(4) 在 “进入 主页 按钮 ”的 编辑 界面 中 ,把 当前 图 层 重 命 名 为 “背景 层 ”。 

(5) 选择 背景 层 的 “ 弹 起 ” 帧 ,然后 打开 “ 库 ” 面 板 , 在 文件 列表 中 选择 samplel3, 在 库 中 
可 以 看 到 samplel3 的 两 个 元 件 :“ 放 射 的 贺 " 和 * 圆 ”, 如 图 13-53 所 示 。 把 * 圆 ” 拖 到 按钮 的 
编辑 界面 中 ,调整 圆 的 位 置 到 界面 的 中 央 , 并 调整 圆 的 大 小 。 

(6) 在 背景 层 为 “指针 ”状态 插入 关键 帧 ,然后 把 该 帧 中 的 圆 删除 ,从 库 中 把 “放射 的 圆 ” 
拖 放 到 编辑 界面 的 中 央 。 

(7) 在 背景 层 为 “ 按 下 ?状态 插入 关键 帧 ,然后 把 该 帧 中 的 元 件 删除 ,从 库 中 把 * 圆 ? 拖 放 
到 编辑 界面 的 中 央 ,调整 圆 的 大 小 ,让 它 比 * 弹 起 ”状态 小 一 些 。 

(8) 新 建 一 个 图 层 , 命 名 为 “文本 层 ”。 选 择 文本 层 中 的 “ 弹 起 ” 帧 ,在 编辑 界面 上 输入 
“进入 主页 ”, 设 置 文 本 的 大 小 和 颜色 ,并 将 它 调整 到 界面 的 中 央 。 

(9) 在 文本 层 为 “指针 经 过 ”状态 插入 关键 帧 ,然后 调整 该 帧 中 的 文本 ,对 它 的 颜色 和 大 
小 做 一 些 变化 ,保持 文本 放 在 界面 的 中 央 。 

(10) 在 文本 层 为 “ 按 下 ?状态 插入 关键 帧 ,然后 调整 该 帧 中 的 文本 ,对 它 的 颜色 和 大 
小 做 一 些 变化 ,保持 文本 放 在 界面 的 中 央 。 最 终 * 进 入 主页 按钮 "的 “时 间 ? 轴 如 图 13-54 
所 示 。 
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加 外 
+ 
2 个 项 日 Dp 
名称 和 | 链接 针 合 口 弹 起 指针 .| 按 F| 点 击 
回 放射 的 加 7 | 
加 日 
图 13-53 元 件 可 在 “ 库 ” 面 板 中 找到 13-54 ”三 个 状态 帧 都 需要 两 个 图 层 
(11) 退出 按钮 的 编辑 , 回 到 场景 1, 在 * 库 ?面板 中 选择 samplel4, 把 “进入 主页 按钮 " 拖 
放 到 舞台 上 。 
(12) 保存 文档 ,测试 影片 。 


前 面 讲 过 , 当 存 放 影 片 剪 辑 的 帧 被 触发 的 时 候 , 影 片 剪 辑 就 会 播放 。 在 上 面 的 示例 中 ， 
影片 剪辑 被 放 在 背景 层 的 “指针 经 过 ” 帧 当中 ,光标 移 到 按钮 上 的 时 候 , 指 针 经 过 ” 帧 被 触 
发 ,影片 剪辑 放射 的 圆 ?就 会 开始 播放 。 这 就 是 一 开始 “放射 的 圆 ? 没 有 显示 出 来 ,只 有 当 鼠 
标 移 到 按钮 上 时 才 开始 播放 的 原因 。 


< 任务 13.5 


内 容 : 设计 并 制作 一 个 Flash 作品 ,要 求 显示 一 个 按钮 ,按钮 上 显示 “进入 网 站 ”, 为 按 
钮 设置 一 些 动画 效果 。 


13.5.4 动作 


在 Flash 动画 作品 中 ,为 了 给 动画 中 的 对 象 添加 更 多 的 效果 ,经 常 需要 使 用 代码 来 控制 
对 象 的 表现 形态 。 正 因为 这 些 代码 赋予 了 动画 对 象 更 多 的 动作 效果 ,所 以 被 形象 地 叫做 “ 动 
作 脚 本 ”。 在 这 一 节 中 ,要 学 习 如 何 给 按钮 添加 “动作 脚本 ”。 

1. ActionScript 

ActionScript 是 Flash 内 置 的 一 种 编程 语言 ,人 们 使 用 它 来 编写 Flash 中 的 动作 脚本 。 
使 用 ActionScript 为 动画 编程 ,可 以 实现 各 种 动画 特效 ,可 以 对 影片 进行 灵活 地 控制 ,并 且 
能 够 让 动画 与 动画 的 浏览 者 进行 互动 。 

ActionScript 编写 的 动作 脚本 可 以 被 添加 到 关键 帧 .按钮 以 及 影片 剪辑 中 。 

本 书 并 不 介绍 ActionScript 的 语法 ,只 是 介绍 如 何 添加 ActionScript 编写 的 动作 脚本 ， 
同时 介绍 脚本 中 常用 的 一 些 命令 。 

2. 动作 面板 

编写 动作 脚本 ,一般 在 “动作 ”面板 中 进行 。 单 击 “ 窗 口 ”菜单 ,选择 “动作 ”菜单 项 ,就 可 
以 打开 “动作 ”面板 ,如 图 13-55 所 示 ,或 者 直接 按 F9 键 ,也 可 以 打开 或 关闭 “动作 ”面板 。 

“动作 ”面板 主要 由 命令 列表 窗口 ( 左 侧 上 )、 目 标 列表 窗口 ( 左 侧 下 ) 和 代码 编写 窗口 ( 右 
侧 ) 组 成 。 通 过 命令 列表 ,可 以 选择 要 添加 到 代码 中 的 命令 ; 通过 目标 列表 ,可 以 选择 要 添 
加 动作 脚本 的 关键 帧 或 目标 元 件 等 ; 通过 代码 窗口 ,可 以 编写 动作 脚本 。 
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动作 
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图 13-55 ”Flash 的 “动作 ”面板 


在 打开 “动作 ”面板 之 前 ,应 该 选择 可 添加 动作 脚本 的 对 象 ,否则 在 “动作 ”面板 中 ,目标 
列表 窗口 将 显示 “无 法 将 动作 应 用 于 当前 所 选 内 容 ”, 同 时 代码 编写 窗口 显示 “Unknown 
error ID #1215 ”。 那 么 ,动作 脚本 可 以 添加 到 哪些 目标 对 象 上 呢 ? 在 Flash 旧版 本 的 文档 
中 ,有 三 类 对 象 可 以 被 添加 脚本 : 时 间 轴 上 的 关键 帧 .按钮 .影片 剪辑 。 而 在 CS 版 本 中 , 脚 
本 只 能 被 添加 到 关键 帧 中 。 

3. 添加 动作 脚本 

选择 时 间 轴 上 的 一 个 关键 帧 , 按 F9 键 , 打 开 * 动 作 ? 面 板 ,就 可 以 开始 为 关键 帧 添加 动 
作 脚 本 。 

【案例 演示 13-15】 一 般 情 况 下 ,场景 中 的 动画 从 第 1 帧 开始 ,直至 最 后 一 帧 ,进行 循环 
播放 。 要 求 修改 samplell. fla ,实现 动画 只 播放 一 次 。 

(1) 运行 Flash, 打 开 samplell. fla, 选 择 文本 层 中 的 最 后 一 个 关键 帧 , 按 F9 键 ,打开 
“动作 ?面板 。 

(2) 在 命令 列表 窗口 中 ,选择 “ActionScript 1. 0&2. 0”, 找 到 “全 局 函数 /时 间 轴 控制 / 
stop”, 双击 stop ,在 代码 编写 窗口 中 就 会 出 现 “stop();”, 如 图 13-56 所 示 。 

(3) 再 次 按 F9 键 ,关闭 “动作 ?面板 ,另存 文档 为 samplel1_2. fla, 测 试 影片 ,就 会 看 到 
动画 只 播放 了 一 次 就 停止 了 。 

添加 了 动作 脚本 的 关键 帧 ,会 出 现 一 个 “a” 的 符号 (如 图 13-57 所 示 )。 如 果 选 择 该 帧 ， 
在 “动作 ”面板 中 把 “stop() ;” 删 除 ,这 个 “a” 符 号 就 会 消失 。stop 在 这 里 的 作用 是 “ 当 到 达 这 
个 地 方 的 时 候 ,停止 影片 播放 ”, 所 以 当 播 到 最 后 一 帧 的 时 候 , 影 片 就 停止 了 。 这 个 脚本 其 实 
也 可 以 被 添加 到 场景 中 其 他 图 层 的 最 后 一 帧 ,比如 展开 层 。 

如 果 把 动作 脚本 “stop() ;” 添 加 到 Flash 文档 中 某 个 图 层 的 第 1 帧 ,那么 Flash 作品 运 
行 的 时 候 是 不 会 播放 的 ,除非 有 按钮 提供 播放 的 功能 。 
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@ gotokndpflay 
@ gotokndstop 
@ nertFrame 
@ nertscene 

@ ml 

@ previrane 

@ prevScene 

@ step 

@ stophllSounds 
团 训 览 器 /网络 
打印 函数 


日 园 当前 选择 加 
回 展开 展 : 帧 30 | 

日 图 声 最 1 一 | 日 开展 : 30 风 ER 
四 展开 展 : 帜 30 图 | 第 2 行 (其 2 生 ) ,第 1 列 


13-56 在 “动作 ?面板 中 添加 代码 


图 13-57 文字 层 第 30 帧 添加 了 动作 脚本 


控制 影片 播放 流程 的 函数 ,常用 的 有 以 下 几 个 。 

(1) stop(): 使 影片 停止 在 当前 时 间 轴 的 当前 帧 中 。 

(2) play(): 使 影片 从 当前 帧 开始 继续 播放 。 

(3) gotoAndStop(n) : 跳 转 到 指定 编号 的 帧 并 停止 ,n 指 代 某 个 帧 的 编号 。 

(4) gotoAndPlay(n) : 跳 转 到 指定 编号 的 帧 并 继续 播放 ,n 指 代 某 个 帧 的 编号 。 

(5) nextFrame() : 跳 转 到 下 一 帧 并 停止 。 

(6) prevFrame(): 回 到 上 一 帧 并 停止 。 

4. 使 用 按钮 控制 动画 

在 旧版 的 Flash 文档 中 ,动作 脚本 可 以 直接 添加 到 按钮 实例 上 ,但 是 到 了 CS 版 本 ,为 按 
钮 添加 脚本 的 步骤 是 这 样 的 : 把 按钮 拖 放 到 舞台 上 之 后 ,在 属性 面板 上 为 按钮 设置 一 个 实 
例 名 称 , 然 后 选择 按钮 所 在 的 帧 ,打开 * 动 作 ? 面 板 , 编 写 与 这 个 实例 名 称 相关 的 代码 。 

【案例 演示 13-16】 修改 samplel0. fla, 要 求 作品 运行 的 时 候 ,动画 是 停止 的 ,只 有 当 单 
击 “ 开 始 播放 ”按钮 ,动画 才 开 始 播 放 。 

(1) 运行 Flash, 打 开 samplel10. fla, 创 建 一 个 新 的 图 层 ,命名 为 “按钮 层 ”。 

(2) 在 Flash 中 打开 samplel2. fla。 

(3) 切换 到 samplel0. fla 的 编辑 窗口 ,选择 按钮 层 的 第 1 帧 ,打开 * 库 ?面板 ,选择 
sample12, 找 到 “开始 播放 ”按钮 元 件 , 把 它 从 库 中 拖 出 , 放 到 舞台 上 。 
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(4) 选择 按钮 层 的 第 1 帧 ,然后 选 舞台 上 的 按钮 ， a 
打开 属性 面板 ,输入 实例 名 称 start_btn, 如 图 13-58 图 Ea r 严 

所 示 。 
(5) 选择 按钮 层 的 第 1 帧 , 按 F9 键 ,打开 “动作 ” 面 ”图 13-58 设置 按钮 的 实例 名 称 
板 ,输入 下 面 的 代码 。 其 中 ,start_btn 指 的 就 是 前 面 添加 的 播放 按钮 。 


sto 过 

ee addEventListener(MouseEvent. CLICK, start_btnClickHandler) ; 

function start_btnClickHandler(evt:MouseEvent) :void 

play(); 

} 

(6) 把 文档 另存 为 sample10_2. fla, 测 试 影片 。 

在 上 面 的 例子 中 ,因为 按钮 层 第 1 帧 的 脚本 中 添加 了 命令 “stop();”, 所 以 进入 动画 第 1 
帧 的 时 候 , 动 画 是 停止 的 。“stop();:" 下 面 5 行 代码 的 意思 是 : 当 单 击 按钮 start_btn 时 , 执 
行 play 命令 。 所 以 单 击 “ 开 始 播放 ?按钮 的 时 候 , 动 画 就 开始 播放 。 也 可 以 再 添加 一 个 “ 停 
止 播放 "的 按钮 到 舞台 上 ,然后 使 用 上 面 的 5 行 代码 ,把 其 中 的 start_btn 蔡 换 成 停止 播放 ” 
按钮 的 实例 名 ,再 把 play 替换 成 stop, 就 能 实现 单 击 按钮 的 时 候 动画 停止 播放 。 


13.5.5 导出 网 页 


一 个 Flash 文档 制作 完成 之 后 ,除了 可 以 导出 生成 SWF 格式 的 动画 作品 之 外 ,还 可 以 
导出 成 网 页 或 GIF 格式 的 动画 图 像 。 将 Flash 文档 导出 生成 网 页 的 步骤 为 : 单 击 “ 文 件 ” 菜 
单 , 选 择 “ 发 布设 置 " 菜 单项 ,在 弹出 的 对 话 框 中 ,把 HTML(. html) 选 中 ,如 图 13-59 所 示 ， 
然后 单 击 对 话 框 底部 的 “发 布 ”按钮 再 确定 ,在 Flash 文档 的 同一 个 目录 下 就 会 生成 同名 的 
网 页 文件 。 


格式 [Flash | mL 


类 型 吉隆 

Mssh_ Csr) CT 
Fi Chtnl) 
口 grr 图 像 (gif) 

口 Jzs 图 价 (jp@) sunplel0_2. jpe 

口 Brs 图 你 (pne) sanplel0_2. pne 
口 
口 


indows 放映 文件 〔 exe) 
acintosh 放映 文件 


SSE 


使 用 默认 名 称 


图 13-59 导出 网 页 设置 框 


在 如 图 13-59 所 示 的 对 话 框 中 ,也 可 以 单 击 HTML(. html) 后 面 的 输入 框 ,修改 网 页 的 
名 字 或 者 单 击 输入 框 后 面 的 文件 夹 图 标 ,改变 网 页 文件 的 存放 位 置 。 

【案例 演示 13-17】 根据 图 13-60 的 设计 ,制作 校园 网 站 的 导入 动画 ,并 生成 对 应 的 导 
人 页 。 


第 13 章 网 页 制作 : Flash ( @ EX) 


福州 职业 技术 学 院 


图 13-60 Flash 案例 , 导入 页 动画 2 


(1) 运行 Flash, 新 建文 档 , 保 存 为 xywz_guide. fla, 修 改 文档 大 小 为 700X500 像素 。 

(2) 将 当前 图 层 重 命 名 为 “网 站 名 称 ”, 输 入 “福州 职业 技术 学 院 ”。 设 置 文 本 大 小 为 60， 
颜色 为 并 CC6600, 字 体 为 华文 行 楷 , 将 文本 放置 在 舞台 的 上 方 。 在 第 90 帧 的 位 置 插入 关 
键 帧 。 

(3) 新 建 一 个 图 层 , 命 名 为 “ 遮 单 1”"。 选 择 第 1 帧 ,在 舞台 上 添加 一 个 宽 20 高 80 的 
和 矩形 , 放 到 “福州 职业 技术 学 院 " 中 * 福 ? 字 的 左 侧 , 在 第 90 帧 的 位 置 插入 关键 帧 ,选择 该 
帧 的 矩形 ,使 用 任意 变形 工具 拖 动 矩形 的 右边 ,使 之 变 大 到 完全 将 “福州 职业 技术 学 院 ” 
覆盖 ,然后 在 这 个 层 的 第 1 帧 和 第 90 帧 之 间 创 建 补 间 形 状 。 做 好 后 暂时 将 “ 谈 单 1” 图 层 
隐藏 。 

(4) 新 建 一 个 图 层 ,命名 为 “流光 ”。 选 择 第 1 帧 ,添加 一 个 宽 40 高 80 的 矩形 ,并 且 填 
充 色 设 置 为 五 彩 的 线性 渐变 ; 然后 用 任意 变形 工具 把 矩形 向 右 旋转 一 点 ,把 矩形 放 到 “福州 
职业 技术 学 院 ” 中 “ 福 ” 字 的 右 侧 , 如 图 13-61 所 示 ; 在 第 90 帧 的 位 置 插入 关键 帧 ,把 第 90 
帧 的 矩形 移动 到 文本 块 的 右 侧 ,然后 在 两 个 关键 帧 之 间 创建 补 间 形状 。 


俱 注 诈 职 业 技 术 学 院 


13-61 “流光 ”矩形 的 起 始 状态 


网 站 开发 基础 教程 


(5) 新 建 一 个 图 层 , 命 名 为 “ 遮 日 2”, 选 择 第 1 帧 ,在 舞台 上 输入 “福州 职业 技术 学 院 ”， 
文本 的 大 小 为 60 ,颜色 为 黑色 ,字体 为 华文 行 楷 , 并 让 这 个 文本 块 的 位 置 稍微 高 于 “网 站 名 
称 ” 图 层 中 的 文本 ,并 且 水 平方 向 上 稍微 偏 右 ,如 图 13-62。 然 后 把 这 个 层 中 的 文本 打 散 成 


作 祷 州 职业 技术 学 院 


图 13-62 “ 谈 罩 2” 图 层 中 文本 的 位 置 


(6) 新 建 一 个 图 层 , 命 名 为 “校园 风景 ", 选 择 第 1 帧 ,导入 校园 风景 图 ,调整 图 像 到 适合 
的 大 小 。 

(7) 新 建 一 个 图 层 , 命 名 为 “ 遮 四 3”, 选择 第 1 帧 ,使 用 “钢笔 ”工具 在 舞台 上 绘制 如 
图 13-63 所 示 的 图 形 , 并 给 图 形 填充 上 任意 颜色 。 


13-63 ”使 用 钢笔 绘制 出 波浪 形 区 域 


(8) 打开 samplel2. fla, 再 切换 回 xywz_guide. fla 的 编辑 窗口 ,选择 “按钮 "图 层 的 第 1 
帧 ,打开 * 库 ?面板 ,选择 samplel2, 找 到 “开始 播放 ”按钮 元 件 , 把 它 拖 出 放 到 舞台 上 。 把 按 
钮 的 实例 名 设置 为 index_btn, 然 后 使 用 任意 变形 工具 调整 按钮 实例 的 大 小 ,并 调整 好 按钮 
的 位 置 。 

(9) 双击 按钮 层 第 1 帧 中 的 “开始 播放 ”按钮 ,进入 按钮 编辑 界面 ,把 “开始 播放 ”修改 为 
“进入 主页 ”, 然 后 退回 场景 1 的 编辑 界面 。 

(10) 选择 按钮 层 的 第 1 帧 ,打开 “动作 ”面板 ,添加 下 面 的 代码 ,然后 关闭 “动作 ”面板 。 


index_btn. addEventListener(MouseEvent. CLICK, index_btnClickHandler); 
function index_btnClickHandler(evt:MouseEvent) :void 
{ 
var _newURL:URLRequest = new URLRequest(" index. htm" ) ; 
var _fangshi:String= "blank"; 
navigateToURL(_newURL， fangshi); 
} 


(11) 取消 图 层 “ 谈 罩 1" 的 隐藏 ,把 它 设置 为 遮 单 层 ,然后 把 图 层 “ 遮 单 2” 和 “ 遮 日 3” 也 


分 别 设置 成 遮 罩 层 。 
(12) 选择 “文件 ”>“ 发 布设 置 ”命令 ,设置 HTML pa cose em 于 
文档 的 存放 位 置 为 校园 网 站 的 根 目录 ,如 图 13-64 所 名 wm Chem ER 


示 , 然 后 发 布 并 确定 。 图 13-64 ”发布 设置 
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(13) 保存 Flash 文档 ,测试 影片 。 

上 面 代 码 的 含义 是 : 当 单 击 index_btn 这 个 按钮 时 ,将 使 用 新 的 窗口 打开 index. htm 这 
个 网 页 。 在 URLRequest("") 的 双 引 号 中 ,要 给 出 网 站 主页 相对 于 xywz_guide. html 的 
地 址 。 


< 任务 13.6 


内 容 : 为 校园 网 站 设计 并 制作 一 个 导入 动画 ,生成 一 个 导入 页 ,保存 到 校园 网 站 网 页 的 
存放 目录 下 。 要 求 将 Flash 文档 保存 为 “导入 页 动画 2. fla”, 并 要 求 动画 中 有 “进入 主页 "的 
按钮 。 


刷 王 波 
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本 章 介绍 网 页 背景 音乐 .视频 对 象 .Flash 动画 在 网 页 上 的 添加 方法 以 及 相关 的 一 些 属 
性 设置 ,以 实现 更 生动 的 网 页 页 面 效 果 。 

本 章 学 习 要 点 : 

(1) 了 解 常见 音乐 格式 

(2) 了 解 常见 视频 格式 

(3) 掌握 网 页 背景 音乐 的 添加 方法 

(4) 掌握 普通 视频 的 添加 方法 

(5) 掌握 FLV 视频 的 添加 方法 

(6) 掌握 Flash 动画 的 添加 方法 

(7) 掌握 媒体 对 象 的 参数 设置 方法 

在 网 页 中 ,包括 声音 ,视频 和 Flash 动画 在 内 的 各 种 媒体 的 应 用 ,有 时 候 会 使 页 面 显得 
更 加 生动 有 趣 或 者 功能 更 加 强大 。 比 如 在 个 人 网 站 的 主页 上 添加 适当 的 背景 音乐 ,可 能 会 
增加 用 户 对 网 站 的 印象 ; 比如 在 教学 网 站 上 提供 教学 视频 页 面 ,可 以 增强 教学 效果 ; 而 
Flash 动画 的 使 用 ,更 是 让 页 面 效果 显得 丰富 多 彩 。 如 果 想 让 网 页 更 生动 、 更 强大 ,就 来 了 
解 一 下 音乐 ,视频 和 Flash 动画 在 网 页 上 的 使 用 。 


14.1.1 常见 音乐 格式 


音乐 有 多 种 格式 ,人 们 一 般 使 用 光盘 、U 盘 或 计算 机 的 其 他 存储 介质 来 存放 音乐 。 被 
存储 在 这 些 介质 中 的 音乐 ,事实 上 是 一 段 段 的 编码 。 在 计算 机 技术 中 ,有 很 多 种 编码 的 方 
式 。 也 就 是 说 ,计算 机 中 存储 的 每 一 首 歌曲 或 每 一 段 声音 ,都 可 能 使 用 了 不 同 的 编码 技术 。 
因为 不 同 的 编码 技术 ,从 而 产生 不 同 的 音乐 格式 。 目 前 ,流行 的 音乐 格式 有 MP3 格式 、 
WMA 格式 .WAYV 格式 、RA 格式 .MID 格式 等 。 

声音 被 录制 并 存储 到 计算 机 之 后 ,就 生成 了 一 个 声音 文件 。 在 这 个 过 程 中 ,如 果 同 一 段 
声音 采用 不 同 的 编码 技术 ,那么 生成 的 文件 大 小 就 可 能 不 同 ,播放 出 来 的 声音 效果 也 可 能 不 
同 。 换 句 话说, 不同 格式 的 音乐 文件 在 占用 存储 空间 和 播放 效果 方面 ,是 存在 区 别 的 。 

1. MP3 格式 

MP3 是 一 种 音频 压缩 技术 ,这 种 技术 是 把 接收 到 的 声音 以 1: 10 或 1: 12 的 比例 进行 
压缩 ,并 且 尽 量 保留 了 原 有 的 声音 信息 ,做 到 了 节省 存储 空间 的 同时 还 保证 了 较 好 的 音质 。 
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每 分 钟 MP3 格式 的 音乐 只 占用 1MB 左右 的 存储 空间 ,一 首 歌 曲 基 本 上 只 有 几 兆 ,这 样 的 大 
小 很 适合 在 网 上 传输 或 供用 户 下 载 。 所 以 MP3 从 一 开始 就 几乎 成 了 网 络 上 音乐 的 代名词 。 

2. WMA 格式 

WMA 格式 是 微软 公司 主推 的 一 种 音频 格式 , 它 对 声音 的 压缩 比例 可 以 达到 1 : 18, 所 
以 节省 了 更 多 的 存储 空间 。WMA 技术 支持 “ 防 复制 ”功能 ,所 以 把 音乐 文件 做 成 WMA 格 
式 , 可 以 有 效 地 防止 盗版 。 

3. WAYV 格式 

WAYV 格式 也 是 微软 公司 研发 的 一 种 文件 格式 。WAYV 格式 的 声音 文件 ,也 叫 波形 声音 
文件 。WAYV 格式 的 声音 文件 音质 可 以 跟 CD 媲美 ,但 也 因此 需要 比较 大 的 存储 空间 ,所 以 
不 利于 在 网 络 上 传播 。 

4. RA 格式 

RA 格式 是 Real 公司 开发 的 网 络 音频 格式 。 制 作 RA 格式 的 音乐 文件 时 ,可 以 加 入 版 
权 、 演 唱 者 、 制 作者 等 信息 。 由 于 使 用 了 独特 的 音频 制作 技术 ,RA 格式 的 音乐 文件 在 网 络 
上 的 播放 效果 比 一 般 的 音频 文件 更 好 ,所 以 目前 很 多 提供 在 线 收听 功能 的 网 站 ,都 使 用 RA 
格式 的 音乐 文件 。 

5. MID 格式 

MID 技术 是 由 多 家 知名 电子 乐器 制造 厂商 联合 发 展 起 来 的 。 记 录 1 分 钟 声音 的 MID 
文件 大 概 只 有 10KB 左右 ,所 以 MID 格式 的 音乐 文件 占用 很 少 的 存储 空间 。 但 是 ,这 种 格 
式 的 文件 一 般 只 用 于 记录 简单 的 音乐 ,比如 乐器 演奏 的 乐曲 。 有 一 些 手机 铃声 使 用 的 就 是 
MID 格式 的 音频 文件 。 

了 解 常见 的 音乐 格式 ,有 助 于 制作 网 页 时 选择 音乐 。 

14.1.2 网 页 背景 音乐 

1. 添加 背景 音乐 

网 页 背景 音乐 指 的 是 当 网 页 被 浏览 时 ,同时 在 后 台 播 放 的 音乐 。 使 用 网 页 背景 音乐 的 
时 候 , 最 好 选择 占用 存储 空间 小 的 音乐 格式 。 因 为 添加 了 背景 音乐 之 后 ,浏览 网 页 时 ,浏览 
器 除了 要 打开 网 页 上 看 得 见 的 信息 之 外 ,还 要 打开 网 页 上 附带 的 背景 音乐 文件 ,如 果 这 时 音 
乐 文件 比较 大 ,那么 肯定 要 影响 浏览 器 运行 的 速度 ,也 就 影响 网 页 打开 的 速度 。 如 果 网 页 的 
打开 速度 太 慢 ,一般 的 用 户 都 不 会 有 耐心 去 等 待 , 可 能 就 直接 把 浏览 器 窗口 关闭 ,这 样 就 降 
低 了 网 页 的 浏览 率 ,也 影响 了 用 户 对 这 个 网 站 的 印象 。 

添加 网 页 背景 音乐 的 步骤 如 下 。 

(1) 运行 Dreamweaver, 打 开 网 页 ,切换 到 代码 视图 ,在 王 body 过 标签 的 下 面 一 行 ,输入 
< 一 bgsound />。 

(2) 把 光标 定位 到 bgsound 的 后 面 , 按 空格 键 ,在 弹出 的 如 图 14-1 所 示 的 菜单 中 双击 
src, 这 时 代码 视图 中 就 自动 输入 “src 二 ""”, 并 出 现 一 个 “浏览 ”链接 , 单 击 “ 浏 览 ” 链 接 , 在 “ 选 
择 文 件 "窗口 中 选择 音乐 文件 ,然后 单 击 “确定 ”按钮 。 

(3) 如 果 选 择 的 音乐 文件 不 在 网 站 的 根 目录 下 ,那么 Dreamweaver 会 弹出 一 个 询问 框 ， 
如 图 14-2 所 示 ,提示 “文件 位 于 站 点 的 根 文件 夹 以 外 , 当 您 发 布 站 点 时 可 能 不 能 访问 ”, 因 为 
网 站 可 能 发 布 到 其 他 计算 机 上 ,那样 网 站 运行 时 就 找 不 到 这 个 音乐 文件 了 。 询 问 框 询问 “愿意 
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将 该 文件 复制 到 根 文件 夹 中 吗 ?” 一 般 情况 下 应 该 选择 “是 ”, 紧 接着 就 会 弹出 “复制 文件 为 "对 
话 框 ,要 求 在 网 站 根 目录 下 选择 一 个 存放 音乐 文件 的 位 置 ,然后 音乐 文件 就 会 被 复制 到 其 中 。 


Dreamweaver 凤 


ro 


了 :Ai v 
您 原意 格 语 六 件 复制 要 六 件 天 中 呈 ? 


CA Lv ][L WW 


图 14-1 按 下 空格 后 出 现 智能 提示 图 14-2 站 外 文件 复制 到 站 内 的 提示 


(4) 添加 完成 后 ,代码 如 图 14-3 所 示 ,表示 音乐 文件 是 “樱花 草 - 星 苹果 乐园 . mp3”, 并 
且 它 被 存放 在 网 站 根 目录 下 的 “文档 "文件 夹 中 。 ed 
(5) 保存 网 页 , 按 F12 键 ,就 可 以 试听 一 下 背景 音 。 scand :zc 文档 /要 在 - 星 和 果园 .mp3r/> 


乐 的 效果 。 14-3 背景 音乐 的 HTML 代码 
2. bgsound 的 属性 
bgsound 标签 的 主要 属性 有 balance、loop、src、volume, 它 们 的 作用 如 下 。 
(1) balance 


用 来 设置 音乐 播放 时 左右 声 道 的 效果 ,属性 值 在 一 10000 和 十 10000 之 间 。 如 果 是 一 10000， 
表示 所 有 的 声音 都 从 左 声 道 出 来 ; 十 10000 则 表示 所 有 的 声音 都 从 右 声 道 出 来 ; 如 果 是 0 
则 表示 左右 声 道 平 衡 。 在 默认 情况 下 ,balance 的 值 是 0。 

(2) loop 

用 来 设置 背景 音乐 循环 播放 的 次 数 ,属性 值 可 以 选择 三 种 : 0、 一 1 和 其 他 任何 一 个 正 
整数 n。0 表示 只 播放 一 次 ; 一 1 表示 循环 播放 无 数 次 ; n 表示 循环 播放 n 次 。 

(3) src 

用 来 设置 背景 音乐 的 “ 源 ”, 也 就 是 指定 背景 音乐 是 计算 机 上 的 哪个 音乐 文件 , 它 的 属性 
值 由 “文件 的 相对 于 当前 网 页 的 路 径 ”" 和 “文件 的 名 称 ”组 合成 。 

(4) volume 

用 来 设置 背景 音乐 播放 时 的 音量 ,属性 值 在 一 10000 到 0 之 间 。0 表示 完全 使 用 当前 计 
算 机 设置 的 音量 ; 负数 表示 使 用 的 音量 比 当 前 音量 减少 一 定 的 数值 ; 一 10000 表示 完全 没 
有 声音 。 

虽然 bgsound 有 以 上 多 种 属性 ,但 一 般 只 用 到 src 这 个 属性 ,其 他 的 属性 设置 没有 太 大 
的 意义 。 


14.2 视 频 


14.2.1 常见 视频 格式 


视频 也 是 在 网 页 上 应 用 很 多 的 一 个 对 象 ,目前 市 场 上 众多 的 视频 网 站 说 明了 网 络 中 视 
频 的 受 欢迎 程度 。 要 学 习 如 何在 网 页 上 使 用 视频 ,也 要 先 从 了 解 视频 的 格式 开始 。 
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1. RM 格式 

RM 是 Real Networks 公司 所 推出 的 一 种 格式 ,用 户 可 以 使 用 RealPlayer 或 RealOne 
Player 播放 RM 格式 的 视频 文件 。RM 格式 可 以 根据 不 同 的 网 络 传输 速率 制定 出 不 同 的 压 
缩 比率 ,从 而 实现 在 低速 率 的 网 络 上 进行 视频 传送 和 播放 ,这 使 得 RM 成 为 目前 的 主流 网 
络 视频 格式 之 一 。 

2. ASF 格式 

ASF 是 微软 公司 为 了 和 Real Networks 公司 竞争 而 推出 的 一 种 视频 格式 ,用 户 可 以 直 
接 使 用 Windows 自 带 的 Windows Media Player 对 其 进行 播放 。ASF 格式 的 压缩 率 和 图 像 
的 质量 都 比较 好 。RM 和 ASF 格式 的 主要 区 别 在 于 ,RM 视频 比较 柔和 ,而 ASF 视频 比较 
清晰 。 

3. RMVB 格式 

RMVB 格式 是 RM 格式 升级 延伸 出 的 新 视频 格式 ,在 保证 了 静止 画面 质量 的 前 提 下 ， 
大 幅 地 提高 了 运动 图 像 的 画面 质量 ,并 且 影 像 质量 和 视频 文件 大 小 之 间 达 到 了 较 好 的 平衡 。 
另外 ,RMVB 格式 还 具有 内 置 字幕 功能 ,很 适合 喜欢 视频 编辑 的 人 群 。 播 放 RMVB 视频 可 
以 使 用 RealOnePlayer 或 RealPlayer 加 RealVideo 解码 器 。 

4. WMYV 格式 

WMYV 也 是 微软 公司 推出 的 一 种 视频 格式 ,这 种 格式 的 视频 适合 直接 在 网 上 实时 观看 。 

5. FLV 格式 

FLV 全 称 为 Flash Video, 是 随 着 动画 制作 软件 Flash 发 展 而 来 的 视频 格式 。 由 于 
FLYV 格式 的 视频 文件 小 .加 载 速 度 快 ,使 得 在 网 络 上 实时 观看 视频 效果 十 分 流畅 。 目 前 
FLV 已 经 成 为 视频 文件 的 主流 格式 ,各 种 在 线 视频 网 站 均 采 用 此 视频 格式 。 
14.2.2 视频 在 网 页 上 的 应 用 

1. 添加 视频 

在 网 页 上 添加 视频 的 步骤 如 下 。 

(1) 运行 Dreamweaver, 选 择 “ 插 入 ”一 媒体 ”一 “插件 ”命令 ,弹出 “选择 文件 "对话 框 ， 
在 对 话 框 中 选择 视频 文件 , 单 击 “ 确 定 ” 按 钮 。 

(2) 在 网 页 上 ,通过 “插件 ”添加 了 一 个 视频 对 象 之 后 ,就 出 现 了 如 
图 14-4 所 示 的 图 标 。 这 

(3) 选择 该 图 标 , 在 如 图 14-5 所 示 的 属性 面板 上 修改 该 视频 对 象 的 
属性 。 刚 添加 到 网 页 上 的 视频 是 个 很 小 的 图 标 ,可 以 通过 属性 面板 上 的 图 14 4 网 页 上 的 


“ 宽 " 和 “高 "属性 来 设置 视频 播放 窗口 的 大 小 或 者 拖 动 视频 图 标 来 改变 揪 件 图 标 
它 的 大 小 。 
< 加 手 忻 ， 宽 旬 |130 | 源 文件 @@) 文档 /隐形 的 二 竺 .日 "| 加 ”对 主 罗 | 默认 值 ~ 
了 商品 07] 括 件 wRL@)| [= [GE | 
委 直 边 距 oO | 边框 四 
水 inEC[ | [mE >| 


14-5 插件 属性 面板 
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(4) 如 果 和 希望 网 页 一 打开 视频 就 能 自动 播放 ,可 通过 设置 参数 来 实现 : 单 击 属性 面板 
上 的 “参数 ”按钮 ,打开 “参数 ”面板 ,如 图 14-6 所 示 ,添加 参数 autostart, 设 置 值 为 true。 单 
击 轩 可 添加 参数 , 单 击 口 ] 删除 参数 。 


antostart 


14-6 视频 自动 播放 的 参数 设置 


2. 添加 FLV 视频 

在 Dreamweaver 中 ,为 添加 FLYV 格式 的 视频 单独 提供 了 途径 ,操作 步骤 如 下 。 

(1) 运行 Dreamweaver ,选择 "插入 ”媒体 ”一 FLV 命令 ,弹出 一 个 “插入 FLV” 对 话 
框 ,如 图 14-7 所 示 , 在 对 话 框 中 单 击 “ 浏 览 ” 按 钮 ,选择 FLV 文件 , 单 击 “确定 ”按钮 。 


视频 类 到， 累进 式 下 载 视频 司 
取消 
WL: 文档 /隐形 的 大 膀 . fv 民权 帮助 
《输入 FLY 文件 的 相对 或 绝对 路 径 ) 
外 观 : |Clear Skin 1 (最 小 宽度 : 140) | 
> il mm 只 


宽度 : 500 | 回 限制 高 宽 比 
高 度 : |400 包括 外 观 : 500x400 


自动 播放 
口 自动 重新 播放 


图 14-7 添加 FLV 视频 


(2) 如 果 选 择 的 文件 名 称 中 包含 空格 或 特殊 字符 ,“ 确 定 ” 的 时 候 将 弹出 一 个 警告 框 ,如 
图 14-8 所 示 , 提 示 :“URL 不 能 包含 空格 或 特殊 字符 。 请 更 改 路 径 或 文件 名 ,然后 重 试 .。” 这 
时 需要 把 FLV 文件 的 名 称 改 一 下 ,然后 重新 选择 并 单 击 “ 确 定 ” 按 钮 。 如 果 在 “确定 ”之 前 没 
有 输入 “宽度 ”和 “高 度 ”, 也 会 弹出 相应 的 警告 框 ,要 求 输入 。 

(3) 在 网 页 上 添加 了 FLYV 视频 对 象 之 后 .保存 文档 ， pe 区 
按 F12 键 浏览 网 页 。 如 果 是 第 一 次 在 网 页 上 添加 FLYV 文 A 和 
件 ,这 时 将 弹出 图 14-9 所 示 的 对 话 框 ,提示 在 网 页 上 使 用 i 
FLV 文件 所 需要 的 文件 将 由 Dreamweaver 自动 产生 并 复 
制 到 网 页 的 存放 目录 下 。 单 击 “ 确 定 ” 按 钮 。 确 定之 后 , 打 
开 网 页 所 在 的 目录 ,可 以 看 到 已 经 添加 了 Script 文件 夹 和 


图 14-8 视频 文件 名 称 不 合 
要 求 的 提示 
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两 个 SWF 文件 : Clear_Skin_1 和 FLVPlayer_Progressive。 


复制 相关 文件 区 


由 针 i. a 


Seripts/expressInstall. swf 
Seripts/swfobject_modified js 


14-9 ”添加 FLV 视频 所 需 的 相关 文件 


(4) 如 果 希 望 网 页 一 打开 FLV 视频 就 能 自动 播放 ,将 FLV 对 象 选中 ,然后 选择 属性 面 
板 上 的 “自动 播放 ” 复 选 框 ,如 图 14-10 所 示 。 


FLY oo 限制 高 宽 比 [重重 】 文件 文档 /隐形 的 二 入 av ] 已 
局 FLvPlayer | KKk0o0 | 包括 外 观 ; 500x400 外 观 [Clesr skin 1 (最 小 宽度 : 140) 加 

自动 播放 

口 自动 重新 播放 


图 14-10 FLYV 视频 对 象 的 属性 面板 


14.3 SWF 对 象 


1. 添加 SWF 对 象 

在 前 面 的 章节 中 ,已 经 介绍 了 Flash 动画 的 基本 制作 方法 ,也 了 解 到 了 Flash 动画 的 魅 
力 ,并 且 知 道 SWF 对 象 就 是 Flash 动画 作品 。 由 于 Flash 的 流行 ,在 网 络 上 有 许 许多 多 的 
Flash 作品 共享 ,这些 现成 的 作品 有 时 也 能 拿 来 为 自己 的 网 页 增色 。 

添加 SWF 对 象 的 步骤 如 下 。 

(1) 运行 Dreamweaver, 选 择 * 插 入 ”> 媒体 ”SWF 命令 ,打开 “选择 SWF” 窗口 ,找到 
所 需 的 SWF 文件 ,然后 单 击 “ 确 定 ” 按 钮 。 

(2) 添加 之 后 ,在 网 页 上 看 到 的 Flash 动画 对 象 是 一 个 如 图 14-11 所 示 的 图 标 ,可 以 拖 
动 它 来 调节 FLASH 动画 显示 的 大 小 。 


四 
图 14-11 网 页 上 的 SWF 文件 图 标 


(3) 保存 文档 , 按 F12 键 浏览 网 页 效果 。 
2. Flash 对 象 的 属性 
选中 网 页 上 的 Flash 对 象 ,属性 面板 上 显示 对 应 的 属性 。 
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如 果 和 希望 网 页 打开 的 时 候 ,Flash 动画 自动 播放 ,并 且 循 环 播放 ,选择 属性 面板 左下 角 
的 “循环 "和 “自动 播放 ” 复 选 框 ; 如 果 希 望 动画 的 背景 是 透明 的 , 单 击 属性 面板 右 下 角 的 “ 参 
数 ” 按 钮 ,添加 参数 wmode, 设 置 值 为 transparent( 如 图 14-12 所 示 ) 或 者 直接 将 属性 面板 下 
方 的 Wmode 选择 “透明 ”选项 。 


A IE 文件 四 反 簿 adie swE | | 

加 ashm | 高 名 ps | 回 编辑 下 ) 
中 循环 人 委 直 边 距 W) | | 。 品质 @) 高 品质 ET 
对 自动 播放 W) 水 平 边 距 吧 ) | 比例 (8) | 默认 全 部 显示 ) 。 司 | Waie 友 | 适 明 加 |[ 全 到 

| 
外 口 QO | 
参数 值 取消 
Swfversion 6. 0. 65. 


.65.0 
expressinstall Scripts/expressInstall. swf 
wmode 


帮助 0 


图 14-12 设置 动画 背景 为 透明 的 参数 


【案例 演示 14-1】 在 校园 网 站 的 主页 上 ,添加 Flash 动画 hudie. swf。 

(1) 运行 Dreamweaver, 打 开 校 园 网 站 的 主页 index. htm。 

(2) 打开 “插入 ”面板 ,选择 “布局 "类型, 单 击 “ 绘 制 AP Div”, 在 网 页 上 拖 动 , 夯 出 一 个 
层 ,如 图 14-13 所 示 。 


图 14-13 在 网 页 上 添加 层 


(3) 把 光标 定位 在 层 中 ,然后 选择 “插入 ”一 “媒体 ”SWF 命令 ,在 “插入 SWF” 对 话 框 
中 找到 hudie. swf, 选 择 它 之 后 单 击 “确定 ”按钮 。 如 


Dreamweaver 园 
果 hudie. swf 不 在 校园 网 站 根 目 录 下 ,Dreamweaver 
文件 位 于 站 点 件 识 以 外 
将 弹出 提示 框 , 问 是 否 将 文件 复制 到 根 文件 夹 。 | “3 3 站 
中 ,如 图 14-14 所 示 , 选择 “是 ”之 后 ,在 根 目录 下 让 
选择 一 个 存放 hudie. swf 的 位 置 ,然后 单 击 “ 确 ee 


定 ” 按 钮 。 取消 
(4) 新 添加 进来 的 Flash 对 象 可 能 尺寸 不 符合 
要 求 , 通 过 拖 动 把 它 调整 到 适合 的 大 小 。 
(5) 保存 文档 , 按 F12 键 浏览 网 页 ,看 到 如 图 14-15 所 示 的 效果 。 因 为 Flash 动画 的 背 
景 是 白色 的 ,挡住 了 主页 的 页 面 ,所 以 需要 把 Flash 的 背景 设置 为 透明 : 回 到 Dreamweaver 
编辑 窗口 ,选择 主页 上 的 Flash 对 象 ,在 属性 面板 上 找到 Wmode, 将 它 设置 为 “透明 ”。 


14-14 动画 应 存放 到 网 站 内 


第 14 章 网 页 制作 : 媒体 的 应 用 ( 克 LT 


图 14-15 动画 的 默认 背景 不 透明 


(6) 保存 文档 ,再 按 F12 键 浏览 ,看 到 如 图 14-16 所 示 的 效果 。 


14-16 ”修改 动画 背景 后 的 页 面 效果 


< 任务 14.1 


内 容 : 

(1) 设计 并 制作 校园 网 站 中 剩余 的 子 页 。 

(2) 完善 网 站 中 主页 的 导航 栏 以 及 各 个 页 面 之 间 的 超 链接 。 
(3) 发 布 校园 网 站 ,对 校园 网 站 进行 测试 和 修改 。 


本 书 任务 和 知识 点 分 布 说 明 


章 节 知识 点 关键 字 实践 任务 
第 1 章 初始 网 站 开发 网 站 、 网 页 .设计 要 素 、 开 发 流程 | 无 
第 2 章 个 人 网 站 需求 分 析 与 a (1) 编写 个 人 网 站 需求 分 析 报告 
设计 需求 分 析 .界面 设计 、Fireworks (2) 设计 个 人 网 站 主页 和 子 页 
(1) 创建 个 人 网 站 根 目录 
第 3 章 网 页 制作 : 搭建 站 点 | 根 目录 .切片 .导出 (2) 切割 主页 和 子 页 设计 图 
(3) 导出 网 页 
(1) 创建 站 点 管理 
加 (2) 修改 主页 和 子 页 单元 格 背 景 
第 4 章 网 页 制作 : 添加 图 文 Dreamweaver、 表 格 .图 像 .文本 (3) 在 主页 上 的 添加 图 像 和 文本 
(4) 制作 第 一 个 子 页 
(1) 设置 主页 上 的 链接 
(2) 制作 其 他 子 页 并 设置 链接 
第 5 章 ”网 页 制作 : 简单 导航 | 超 链接 .CSS 样式 dt 
(4) 使 用 CSS 修饰 超 链接 
(1) 安装 IIS 
第 6 章 ”网 站 测试 与 发 布 Wg et ei (2) 发 布 个 人 网 站 到 模拟 服务 器 
(3) 测试 个 人 网 站 
(1) 编写 校园 网 站 需求 分 析 报告 
需求 分 析 、 界 面 设 计 、Fireworks、| (2) 设计 网 站 Logo 
第 7 章 校园 网 站 需求 分 析 与 | Logo、 图 像 处 理 技术 (3) 设计 校园 网 站 主页 和 子 页 
设计 需求 分 析 ,界面 设计 ,Fireworks，| (4) 创建 校园 网 站 根 目录 
Logo; 图 像 处 理 技术 (5) 导出 主页 
(6) 创建 站 点 管理 
un。 | Dreamweaver, 行 为 弹出 公告 、| (1) 为 主页 添加 弹出 公告 
第 8 章 网 页 制作 : 深 加 公 告 。 | ，。uee. 无 丸 注 动 .漂浮 式 公告 | (2) 为 主页 添加 滚动 公告 
(1) 使 用 框架 集 制作 “校园 剪影 "页 
(2) 制作 “校园 剪影 "页 的 导航 
第 9 章 ”网 页 制作 , 多 窗口 页 面 | 框架 集 .框架 、 超 链接 目标 (3) 使 用 框架 集 制作 各 系 部 页 面 


(4) 制作 “校园 简介 ”和 “机 构 设 
置 "页 


第 10 章 网 页 制作 : 多 层 导航 


Spry 菜单 栏 . 鼠 标 经 过 图 像 


(1) 在 主页 上 添加 Spry 菜单 栏 
并 设置 相关 链接 

(2) 制作 “财务 科 ” 栏 目 对 应 的 
子 页 


附录 本 书 任务 和 知识 点 分 布 说 明 ( 二 六) 


续 表 
章 节 知识 点 关键 字 实践 任务 
(1) 设置 主页 菜单 栏 的 特殊 链接 
(2) 制作 各 系 部 的 文件 下 载 页 面 
非 网 页 文件 邮件 链接 、 错 记 、 友 | (3) 完善 “财务 科 ” 子 页 
第 机率 罗 风 制作 特殊 渤 站 | 祝 寻 入 (4) 完成 主页 上 的 友情 链接 
(5) 制作 “学 生 处 "和 “教务 处 ”" 栏 
目 对 应 的 子 页 
第 12 章 网 页 制作 : 表单 表单 .表单 对 象 制作 主页 上 的 用 户 登 录 表 单 
Flash、 基 本 操作 、 基 本 原理 、 帧 、 
图 层 、 时 间 轴 、 补 间 、 元 件 、 基 本 | ，、 
第 13 章 网 页 制作 : Flash 变化 记 单 . 按 乌 .动作 .网站 导 | 设计 并 制作 网 站 导入 页 
入 页 
(D) 制作 校园 网 站 中 剩余 的 子 页 
(2) 完善 主页 的 导航 栏 以 及 各 个 
第 14 章 网 页 制作 : 媒体 的 应 用 | 背景 音乐 .FLV 视频 .SWF 对象 页 面 之 间 的 超 链接 


(3) 发 布 网 站 ,对 校园 网 站 进行 
测试 和 修改 
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